<!DOCTYPE html><html lang="en"><head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="CR" name="w3c-status">
  <title>HTML 5.1: 4.5. Text-level semantics</title>
  <link href="styles/styles-html.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href=styles.default.css>
  <meta content="Bikeshed 1.0.0" name="generator">

  <link href="styles/W3C-CR" rel="stylesheet" type="text/css">
 </head>
 <body class="h-entry">
  <div class="head">
   <header>
    <p data-fill-with="logo"><a href="http://www.w3.org/"><img alt="W3C" height="48" src="styles/logos/W3C" width="72"></a></p>
    <h1 class="p-name no-ref allcaps" id="title">HTML 5.1</h1>
    <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Candidate Recommendation, <time class="dt-updated" datetime="2016-06-21">21 June 2016</time></span></h2>
   </header>
   
   
   
   
  </div>
  
  
  
  
  
  <nav data-fill-with="table-of-contents" id="toc"><p class="prev_next">← <a href="grouping-content.html#grouping-content"><span class="secno">4.4</span> <span class="content">Grouping content</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="edits.html#edits"><span class="secno">4.6</span> <span class="content">Edits</span></a> →</p>
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory"><li>
       <a href="textlevel-semantics.html#textlevel-semantics"><span class="secno">4.5</span> <span class="content">Text-level semantics</span></a>
       <ol class="toc">
        <li><a href="textlevel-semantics.html#the-a-element"><span class="secno">4.5.1</span> <span class="content">The <span><code>a</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-em-element"><span class="secno">4.5.2</span> <span class="content">The <span><code>em</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-strong-element"><span class="secno">4.5.3</span> <span class="content">The <span><code>strong</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-small-element"><span class="secno">4.5.4</span> <span class="content">The <span><code>small</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-s-element"><span class="secno">4.5.5</span> <span class="content">The <span><code>s</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-cite-element"><span class="secno">4.5.6</span> <span class="content">The <span><code>cite</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-q-element"><span class="secno">4.5.7</span> <span class="content">The <span><code>q</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-dfn-element"><span class="secno">4.5.8</span> <span class="content">The <span><code>dfn</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-abbr-element"><span class="secno">4.5.9</span> <span class="content">The <span><code>abbr</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-ruby-element"><span class="secno">4.5.10</span> <span class="content">The <span><code>ruby</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-rb-element"><span class="secno">4.5.11</span> <span class="content">The <span><code>rb</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-rt-element"><span class="secno">4.5.12</span> <span class="content">The <span><code>rt</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-rtc-element"><span class="secno">4.5.13</span> <span class="content">The <span><code>rtc</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-rp-element"><span class="secno">4.5.14</span> <span class="content">The <span><code>rp</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-data-element"><span class="secno">4.5.15</span> <span class="content">The <span><code>data</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-time-element"><span class="secno">4.5.16</span> <span class="content">The <span><code>time</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-code-element"><span class="secno">4.5.17</span> <span class="content">The <span><code>code</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-var-element"><span class="secno">4.5.18</span> <span class="content">The <span><code>var</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-samp-element"><span class="secno">4.5.19</span> <span class="content">The <span><code>samp</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-kbd-element"><span class="secno">4.5.20</span> <span class="content">The <span><code>kbd</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-sub-and-sup-elements"><span class="secno">4.5.21</span> <span class="content">The <span><code>sub</code></span> and <span><code>sup</code></span> elements</span></a>
        </li><li><a href="textlevel-semantics.html#the-i-element"><span class="secno">4.5.22</span> <span class="content">The <span><code>i</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-b-element"><span class="secno">4.5.23</span> <span class="content">The <span><code>b</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-u-element"><span class="secno">4.5.24</span> <span class="content">The <span><code>u</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-mark-element"><span class="secno">4.5.25</span> <span class="content">The <span><code>mark</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-bdi-element"><span class="secno">4.5.26</span> <span class="content">The <span><code>bdi</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-bdo-element"><span class="secno">4.5.27</span> <span class="content">The <span><code>bdo</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-span-element"><span class="secno">4.5.28</span> <span class="content">The <span><code>span</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-br-element"><span class="secno">4.5.29</span> <span class="content">The <span><code>br</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#the-wbr-element"><span class="secno">4.5.30</span> <span class="content">The <span><code>wbr</code></span> element</span></a>
        </li><li><a href="textlevel-semantics.html#text-level-semantics-usage-summary"><span class="secno">4.5.31</span> <span class="content">Usage summary</span></a>
       </li></ol>
      </li></ol>
  </nav><main><section>
     <h3 class="heading settled" data-level="4.5" id="textlevel-semantics"><span class="secno">4.5. </span><span class="content">Text-level semantics</span><a class="self-link" href="textlevel-semantics.html#textlevel-semantics"></a></h3>
     <h4 class="heading settled" data-level="4.5.1" id="the-a-element"><span class="secno">4.5.1. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-a"><code>a</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-a-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-32">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-62">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-21">Phrasing content</a>.
      </dd><dd>If the element has an <code>href</code> attribute: <a data-link-type="dfn" href="dom.html#interactive-content" id="ref-for-interactive-content-4">Interactive content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-19">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-31">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-22">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-34">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#transparent" id="ref-for-transparent-2">Transparent</a>, but there must be no <a data-link-type="dfn" href="dom.html#interactive-content" id="ref-for-interactive-content-5">interactive content</a> or <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-21">a</a></code> element descendants.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-31">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-32">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-31">Global attributes</a>
      </dd><dd><code><a data-link-type="element-sub" href="links.html#element-attrdef-a-href" id="ref-for-element-attrdef-a-href-10">href</a></code> - Address of the <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-11">hyperlink</a>
      </dd><dd> <code>target</code> - Default <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-23">browsing context</a> for <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-12">hyperlink</a> <a data-link-type="dfn" href="browsers.html#navigated" id="ref-for-navigated-12">navigation</a> and <a href="sec-forms.html#forms-form-submission">§4.10.22 Form submission</a> 
      </dd><dd> <code>download</code> - Whether to download the resource instead of navigating to it, and its
      file name if so 
      </dd><dd><code><a data-link-type="element-sub" href="links.html#element-attrdef-a-rel" id="ref-for-element-attrdef-a-rel-7">rel</a></code> — Relationship of this document (or subsection/topic) to the destination resource
      </dd><dd><code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-a-rev" id="ref-for-element-attrdef-a-rev-8">rev</a></code> — <a data-link-type="dfn" href="document-metadata.html#reverse-link" id="ref-for-reverse-link-3">Reverse link</a> relationship of the destination resource to this document (or subsection/topic)
      </dd><dd><code>hreflang</code> - Language of the linked resource
      </dd><dd><code>type</code> - Hint for the type of the referenced resource
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd> <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#link"><code>link</code></a> (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-16"><em>do not set</em></a>), <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#button"><code>button</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#checkbox"><code>checkbox</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#menuitem"><code>menuitem</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#menuitemcheckbox"><code>menuitemcheckbox</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#menuitemradio"><code>menuitemradio</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#radio"><code>radio</code></a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria-1.1/#switch"><code>switch</code></a> <a data-link-type="biblio" href="references.html#biblio-wai-aria-11">[WAI-ARIA-1.1]</a>, <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#tab"><code>tab</code></a> or <a class="css" data-link-type="value" href="https://www.w3.org/TR/wai-aria/roles#treeitem"><code>treeitem</code></a> 
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-33">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-31">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLAnchorElement" data-dfn-type="interface" data-export="" id="htmlanchorelement-htmlanchorelement">HTMLAnchorElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-36">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="textlevel-semantics.html#dom-htmlanchorelement-target" id="ref-for-dom-htmlanchorelement-target-1">target</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="textlevel-semantics.html#dom-htmlanchorelement-download" id="ref-for-dom-htmlanchorelement-download-1">download</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="textlevel-semantics.html#dom-htmlanchorelement-rel" id="ref-for-dom-htmlanchorelement-rel-1">rel</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="textlevel-semantics.html#dom-htmlanchorelement-rev" id="ref-for-dom-htmlanchorelement-rev-1">rev</a>;
  [<a class="nv idl-code" data-link-type="extended-attribute">SameObject</a>, <a class="nv idl-code" data-link-type="extended-attribute">PutForwards</a>=<a class="n idl-code" data-link-type="attribute" href="https://dom.spec.whatwg.org/#dom-domtokenlist-value">value</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#domtokenlist">DOMTokenList</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="DOMTokenList" href="textlevel-semantics.html#dom-htmlanchorelement-rellist" id="ref-for-dom-htmlanchorelement-rellist-1">relList</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="textlevel-semantics.html#dom-htmlanchorelement-hreflang" id="ref-for-dom-htmlanchorelement-hreflang-1">hreflang</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="textlevel-semantics.html#dom-htmlanchorelement-type" id="ref-for-dom-htmlanchorelement-type-1">type</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="textlevel-semantics.html#dom-htmlanchorelement-text" id="ref-for-dom-htmlanchorelement-text-1">text</a>;
};
<a class="n" data-link-type="idl-name" href="textlevel-semantics.html#htmlanchorelement-htmlanchorelement" id="ref-for-htmlanchorelement-htmlanchorelement-1">HTMLAnchorElement</a> <span class="kt">implements</span> <a class="n" data-link-type="idl-name" href="links.html#htmlhyperlinkelementutils-htmlhyperlinkelementutils" id="ref-for-htmlhyperlinkelementutils-htmlhyperlinkelementutils-1">HTMLHyperlinkElementUtils</a>;
</pre>
     </dd></dl>
     <p>If the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-22">a</a></code> element has an <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-href" id="ref-for-element-attrdef-a-href-11">href</a></code> attribute, then it <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-36">represents</a> a <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-13">hyperlink</a> (a hypertext anchor) labeled by its contents.</p>
     <p>If the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-23">a</a></code> element has no <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-href" id="ref-for-element-attrdef-a-href-12">href</a></code> attribute, then the element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-37">represents</a> a placeholder for where a link might otherwise have been placed, if it had been
  relevant, consisting of just the element’s contents.</p>
     <p>The <code>target</code>, <code>download</code>, <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-rel" id="ref-for-element-attrdef-a-rel-8">rel</a></code>, <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-a-rev" id="ref-for-element-attrdef-a-rev-9">rev</a></code>, <code>hreflang</code>, and <code>type</code> attributes must be omitted if the <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-href" id="ref-for-element-attrdef-a-href-13">href</a></code> attribute is not present.</p>
     <div class="example" id="example-7250b603">
      <a class="self-link" href="textlevel-semantics.html#example-7250b603"></a> 
      <p>If a site uses a consistent navigation toolbar on every page, then the link that would
    normally link to the page itself could be marked up using an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-24">a</a></code> element:</p>
<pre class="highlight"><span class="nt">&lt;nav&gt;</span>
  <span class="nt">&lt;ul&gt;</span>
    <span class="nt">&lt;li&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/news"</span><span class="nt">&gt;</span>News<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;</span> <span class="nt">&lt;a&gt;</span>Examples<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/legal"</span><span class="nt">&gt;</span>Legal<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
</pre>
     </div>
     <div class="impl">
       The <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-href" id="ref-for-element-attrdef-a-href-14">href</a></code>, <code>target</code>, <code>download</code>, and attributes affect what
    happens when users <a data-link-type="dfn" href="links.html#follow-hyperlinks" id="ref-for-follow-hyperlinks-4">follow hyperlinks</a> or <a data-link-type="dfn" href="links.html#download-hyperlinks" id="ref-for-download-hyperlinks-1">download hyperlinks</a> created using the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-25">a</a></code> element. The <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-rel" id="ref-for-element-attrdef-a-rel-9">rel</a></code>, <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-a-rev" id="ref-for-element-attrdef-a-rev-10">rev</a></code>, <code>hreflang</code>, and <code>type</code> attributes may be used to indicate to the user the likely nature of the target resource before
    the user follows the link. 
      <p>The <a data-link-type="dfn" href="editing.html#activation-behavior" id="ref-for-activation-behavior-2">activation behavior</a> of <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-26">a</a></code> elements that create <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-14">hyperlinks</a> is to
    run the following steps:</p>
      <ol>
       <li data-md="">
        <p>If the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-27">a</a></code> element’s <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is not <a data-link-type="dfn" href="browsers.html#fully-active" id="ref-for-fully-active-2">fully active</a>, then abort
these steps.</p>
       </li><li data-md="">
        <p>If either the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-28">a</a></code> element has a <code>download</code> attribute and the algorithm
is not <a data-link-type="dfn" href="browsers.html#allowed-to-show-a-popup" id="ref-for-allowed-to-show-a-popup-1">allowed to show a popup</a>, or the element’s <code>target</code> attribute is
present and applying <a data-link-type="dfn" href="browsers.html#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name" id="ref-for-the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name-1">the rules for choosing a browsing context given a browsing context name</a>, using the
value of the <code>target</code> attribute as the browsing context name, would result
in there not being a chosen browsing context, then run these substeps:</p>
        <ol>
         <li data-md="">
          <p>If there is an <a data-link-type="dfn" href="webappapis.html#entry-settings-object" id="ref-for-entry-settings-object-3">entry settings object</a>, throw an <code>InvalidAccessError</code> exception.</p>
         </li><li data-md="">
          <p>Abort these steps without following the hyperlink.</p>
        </li></ol>
       </li><li data-md="">
        <p>If the target of the <code>click</code> event is an <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-20">img</a></code> element with an <code>ismap</code> attribute specified, then server-side image map processing must be
performed, as follows:</p>
        <ol>
         <li data-md="">
          <p>If the <code>click</code> event was a real pointing-device-triggered <code>click</code> event on the <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-21">img</a></code> element, then let <var>x</var> be the distance in CSS
pixels from the left edge of the image’s left border, if it has one, or the left edge of
the image otherwise, to the location of the click, and let <var>y</var> be the distance
in CSS pixels from the top edge of the image’s top border, if it has one, or the top
edge of the image otherwise, to the location of the click. Otherwise, let <var>x</var> and <var>y</var> be zero.</p>
         </li><li data-md="">
          <p>Let <var>hyperlink suffix</var> be a U+003F QUESTION MARK character, the value of <var>x</var> expressed as a base-ten integer using <a data-link-type="dfn" href="infrastructure.html#ascii-digits" id="ref-for-ascii-digits-65">ASCII digits</a>, a U+002C COMMA
character (,), and the value of <var>y</var> expressed as a base-ten integer using <a data-link-type="dfn" href="infrastructure.html#ascii-digits" id="ref-for-ascii-digits-66">ASCII digits</a>.</p>
        </li></ol>
       </li><li data-md="">
        <p>Finally, the user agent must <a data-link-type="dfn" href="links.html#follow-hyperlinks" id="ref-for-follow-hyperlinks-5">follow the hyperlink</a> or <a data-link-type="dfn" href="links.html#download-hyperlinks" id="ref-for-download-hyperlinks-2">download the hyperlink</a> created by the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-29">a</a></code> element, as determined by the <code>download</code> attribute
and any expressed user preference, passing <var>hyperlink suffix</var>, if the steps above
defined it.</p>
      </li></ol>
     </div>
     <dl class="domintro">
      <dt><var>a</var> . <code>text</code>
      </dt><dd>Same as <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code>.
     </dd></dl>
     <div class="impl">
       The IDL attributes <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLAnchorElement" data-dfn-type="attribute" data-export="" id="dom-htmlanchorelement-download"><code>download</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLAnchorElement" data-dfn-type="attribute" data-export="" id="dom-htmlanchorelement-target"><code>target</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLAnchorElement" data-dfn-type="attribute" data-export="" id="dom-htmlanchorelement-rel"><code>rel</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLAnchorElement" data-dfn-type="attribute" data-export="" id="dom-htmlanchorelement-rev"><code>rev</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLAnchorElement" data-dfn-type="attribute" data-export="" id="dom-htmlanchorelement-hreflang"><code>hreflang</code></dfn>, and <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLAnchorElement" data-dfn-type="attribute" data-export="" id="dom-htmlanchorelement-type"><code>type</code></dfn>, must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-18">reflect</a> the
    respective content attributes of the same name. 
      <p>The IDL attribute <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLAnchorElement" data-dfn-type="attribute" data-export="" id="dom-htmlanchorelement-rellist"><code>relList</code></dfn> must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-19">reflect</a> the <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-rel" id="ref-for-element-attrdef-a-rel-10">rel</a></code> content attribute.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLAnchorElement" data-dfn-type="attribute" data-export="" id="dom-htmlanchorelement-text"><code>text</code></dfn> IDL attribute, on getting, must return the same value as the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> IDL attribute on the element, and on setting, must act as if the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> IDL attribute on the element had been set to the new value.</p>
      <hr>
      <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-30">a</a></code> element also supports the <code>HTMLHyperlinkElementUtils</code> interface. <a data-link-type="biblio" href="references.html#biblio-url">[URL]</a></p>
      <p>When the element is created, and whenever the element’s <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-href" id="ref-for-element-attrdef-a-href-15">href</a></code> content attribute is
    set, changed, or removed, the user agent must invoke the element’s <code>HTMLHyperlinkElementUtils</code> interface’s set the input algorithm with the value of the <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-href" id="ref-for-element-attrdef-a-href-16">href</a></code> content
    attribute, if any, or the empty string otherwise, as the given value.</p>
      <p>The element’s <code>HTMLHyperlinkElementUtils</code> interface’s get the base algorithm must simply return
    the <a data-link-type="dfn" href="infrastructure.html#document-base-url" id="ref-for-document-base-url-9">document base URL</a>.</p>
      <p>The element’s <code>HTMLHyperlinkElementUtils</code> interface’s query encoding is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-document-encoding">document’s character encoding</a>.</p>
      <p>When the element’s <code>HTMLHyperlinkElementUtils</code> interface invokes its update steps with a string <var>value</var>, the user agent must set the element’s <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-href" id="ref-for-element-attrdef-a-href-17">href</a></code> content attribute to
    the string <var>value</var>.</p>
     </div>
     <div class="example" id="example-3fe0f2b1">
      <a class="self-link" href="textlevel-semantics.html#example-3fe0f2b1"></a> The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-31">a</a></code> element may be wrapped around entire paragraphs, lists, tables, and so forth,
    even entire sections, so long as there is no interactive content within (e.g., buttons or other
    links). This example shows how this can be used to make an entire advertising block into a link: 
<pre class="highlight"><span class="nt">&lt;aside</span> <span class="na">class=</span><span class="s">"advertising"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Advertising<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://ad.example.com/?adid=1929&amp;amp;pubid=1422"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;section&gt;</span>
    <span class="nt">&lt;h1&gt;</span>Mellblomatic 9000!<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;p&gt;</span>Turn all your widgets into mellbloms!<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p&gt;</span>Only $9.99 plus shipping and handling.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://ad.example.com/?adid=375&amp;amp;pubid=1422"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;section&gt;</span>
    <span class="nt">&lt;h1&gt;</span>The Mellblom Browser<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;p&gt;</span>Web browsing at the speed of light.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p&gt;</span>No other browser goes faster!<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/aside&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.5.2" id="the-em-element"><span class="secno">4.5.2. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-em"><code>em</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-em-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-33">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-63">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-23">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-20">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-32">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-24">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-35">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-25">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-32">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-33">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-32">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-34">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-32">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-37">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-em" id="ref-for-elementdef-em-4">em</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-38">represents</a> stress emphasis of its contents.</p>
     <p>The level of stress that a particular piece of content has is given by its number of ancestor <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-em" id="ref-for-elementdef-em-5">em</a></code> elements.</p>
     <p>The placement of stress emphasis changes the meaning of the sentence. The element thus forms an
  integral part of the content. The precise way in which stress is used in this way depends on the
  language.</p>
     <div class="example" id="example-ced98b0a">
      <a class="self-link" href="textlevel-semantics.html#example-ced98b0a"></a> These examples show how changing the stress emphasis changes the meaning. First, a general
    statement of fact, with no stress: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Cats are cute animals.<span class="nt">&lt;/p&gt;</span>
</pre>
      <p>By emphasizing the first word, the statement implies that the kind of animal under discussion
    is in question (maybe someone is asserting that dogs are cute):</p>
<pre class="highlight"><span class="nt">&lt;p&gt;&lt;em&gt;</span>Cats<span class="nt">&lt;/em&gt;</span> are cute animals.<span class="nt">&lt;/p&gt;</span>
</pre>
      <p>Moving the stress to the verb, one highlights that the truth of the entire sentence is in
    question (maybe someone is saying cats are not cute):</p>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Cats <span class="nt">&lt;em&gt;</span>are<span class="nt">&lt;/em&gt;</span> cute animals.<span class="nt">&lt;/p&gt;</span>
</pre>
      <p>By moving it to the adjective, the exact nature of the cats is reasserted (maybe someone
    suggested cats were <em>mean</em> animals):</p>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Cats are <span class="nt">&lt;em&gt;</span>cute<span class="nt">&lt;/em&gt;</span> animals.<span class="nt">&lt;/p&gt;</span>
</pre>
      <p>Similarly, if someone asserted that cats were vegetables, someone correcting this might
    emphasize the last word:</p>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Cats are cute <span class="nt">&lt;em&gt;</span>animals<span class="nt">&lt;/em&gt;</span>.<span class="nt">&lt;/p&gt;</span>
</pre>
      <p>By emphasizing the entire sentence, it becomes clear that the speaker is fighting hard to get
    the point across. This kind of stress emphasis also typically affects the punctuation, hence the
    exclamation mark here.</p>
<pre class="highlight"><span class="nt">&lt;p&gt;&lt;em&gt;</span>Cats are cute animals!<span class="nt">&lt;/em&gt;&lt;/p&gt;</span>
</pre>
      <p>Anger mixed with emphasizing the cuteness could lead to markup such as:</p>
<pre class="highlight"><span class="nt">&lt;p&gt;&lt;em&gt;</span>Cats are <span class="nt">&lt;em&gt;</span>cute<span class="nt">&lt;/em&gt;</span> animals!<span class="nt">&lt;/em&gt;&lt;/p&gt;</span>
</pre>
     </div>
     <div class="note" role="note">
       The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-em" id="ref-for-elementdef-em-6">em</a></code> element isn’t a generic "italics" element. Sometimes, text is intended to
    stand out from the rest of the paragraph, as if it was in a different mood or voice. For this,
    the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-i" id="ref-for-elementdef-i-17">i</a></code> element is more appropriate. 
      <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-em" id="ref-for-elementdef-em-7">em</a></code> element also isn’t intended to convey importance; for that purpose, the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-4">strong</a></code> element is more appropriate.</p>
     </div>
     <h4 class="heading settled" data-level="4.5.3" id="the-strong-element"><span class="secno">4.5.3. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-strong"><code>strong</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-strong-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-34">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-64">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-26">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-21">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-33">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-27">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-36">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-28">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-33">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-34">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-33">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-35">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-33">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-38">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-5">strong</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-39">represents</a> strong importance, seriousness, or
  urgency for its contents.</p>
     <p><strong>Importance</strong>: The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-6">strong</a></code> element can be used in a heading, caption,
  or paragraph to distinguish the part that really matters from other parts that might be more
  detailed, more jovial, or merely boilerplate.</p>
     <p class="example" id="example-09b2529f"><a class="self-link" href="textlevel-semantics.html#example-09b2529f"></a>For example, the first word of the previous paragraph is marked up with <code>strong</code> to distinguish it from the more detailed text in the rest of the
  paragraph.</p>
     <p><strong>Seriousness</strong>: The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-7">strong</a></code> element can be used to mark up a warning
  or caution notice.</p>
     <p><strong>Urgency</strong>: The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-8">strong</a></code> element can be used to denote contents that
  the user needs to see sooner than other parts of the document.</p>
     <p>The relative level of importance of a piece of content is given by its number of ancestor <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-9">strong</a></code> elements; each <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-10">strong</a></code> element increases the importance of its
  contents.</p>
     <p>Changing the importance of a piece of text with the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-11">strong</a></code> element does not change
  the meaning of the sentence.</p>
     <div class="example" id="example-86d72e9c">
      <a class="self-link" href="textlevel-semantics.html#example-86d72e9c"></a> Here, the word "chapter" and the actual chapter number are mere boilerplate, and the actual
    name of the chapter is marked up with <code>strong</code>: 
<pre class="highlight"><span class="nt">&lt;h1&gt;</span>Chapter 1: <span class="nt">&lt;strong&gt;</span>The Praxis<span class="nt">&lt;/strong&gt;&lt;/h1&gt;</span>
</pre>
      <p>In the following example, the name of the diagram in the caption is marked up with <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-12">strong</a></code>, to distinguish it from boilerplate text (before) and the description
    (after):</p>
<pre class="highlight"><span class="nt">&lt;figcaption&gt;</span>Figure 1. <span class="nt">&lt;strong&gt;</span>Ant colony dynamics<span class="nt">&lt;/strong&gt;</span>. The ants in this colony areaffected by the heat source (upper left) and the food source (lower right).<span class="nt">&lt;/figcaption&gt;</span>
</pre>
      <p>In this example, the heading is really "Flowers, Bees, and Honey", but the author has added a
    light-hearted addition to the heading. The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-13">strong</a></code> element is thus used to mark up
    the first part to distinguish it from the latter part.</p>
<pre class="highlight"><span class="nt">&lt;h1&gt;&lt;strong&gt;</span>Flowers, Bees, and Honey<span class="nt">&lt;/strong&gt;</span> and other things I don’t understand<span class="nt">&lt;/h1&gt;</span>
</pre>
     </div>
     <div class="example" id="example-3e1f3000">
      <a class="self-link" href="textlevel-semantics.html#example-3e1f3000"></a> Here is an example of a warning notice in a game, with the
    various parts marked up according to how important they are: 
<pre class="highlight"><span class="nt">&lt;p&gt;&lt;strong&gt;</span>Warning.<span class="nt">&lt;/strong&gt;</span> This dungeon is dangerous.
<span class="nt">&lt;strong&gt;</span>Avoid the ducks.<span class="nt">&lt;/strong&gt;</span> Take any gold you find.
<span class="nt">&lt;strong&gt;&lt;strong&gt;</span>Do not take any of the diamonds<span class="nt">&lt;/strong&gt;</span>,
they are explosive and <span class="nt">&lt;strong&gt;</span>will destroy anything within
ten meters.<span class="nt">&lt;/strong&gt;&lt;/strong&gt;</span> You have been warned.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-2c57b6b9">
      <a class="self-link" href="textlevel-semantics.html#example-2c57b6b9"></a> In this example, the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-14">strong</a></code> element is used to denote the part of the text that
    the user is intended to read first. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Welcome to Remy, the reminder system.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>Your tasks for today:<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;ul&gt;</span>
  <span class="nt">&lt;li&gt;&lt;p&gt;&lt;strong&gt;</span>Turn off the oven.<span class="nt">&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;p&gt;</span>Put out the trash.<span class="nt">&lt;/p&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;p&gt;</span>Do the laundry.<span class="nt">&lt;/p&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.5.4" id="the-small-element"><span class="secno">4.5.4. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-small"><code>small</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-small-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-35">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-65">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-29">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-22">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-34">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-30">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-37">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-31">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-34">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-35">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-34">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-36">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-34">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-39">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-small" id="ref-for-elementdef-small-5">small</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-40">represents</a> side comments such as small print.</p>
     <p class="note" role="note"> Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small
    print is also sometimes used for attribution, or for satisfying licensing requirements. </p>
     <p class="note" role="note"> The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-small" id="ref-for-elementdef-small-6">small</a></code> element does not "de-emphasize" or lower the importance of text
    emphasized by the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-em" id="ref-for-elementdef-em-8">em</a></code> element or marked as important with the <code>strong</code> element. To mark text as not emphasized or important, simply do not mark it up with the <code>em</code> or <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-15">strong</a></code> elements respectively. </p>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-small" id="ref-for-elementdef-small-7">small</a></code> element should not be used for extended spans of text, such as multiple
  paragraphs, lists, or sections of text. It is only intended for short runs of text. The text of a
  page listing terms of use, for instance, would not be a suitable candidate for the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-small" id="ref-for-elementdef-small-8">small</a></code> element: in such a case, the text is not a side comment, it is the main content
  of the page.</p>
     <div class="example" id="example-351660ca">
      <a class="self-link" href="textlevel-semantics.html#example-351660ca"></a> In this example, the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-small" id="ref-for-elementdef-small-9">small</a></code> element is used to indicate that value-added tax is
    not included in a price of a hotel room: 
<pre class="highlight"><span class="nt">&lt;dl&gt;</span>
  <span class="nt">&lt;dt&gt;</span>Single room
  <span class="nt">&lt;dd&gt;</span>199 € <span class="nt">&lt;small&gt;</span>breakfast included, VAT not included<span class="nt">&lt;/small&gt;</span>
  <span class="nt">&lt;dt&gt;</span>Double room
  <span class="nt">&lt;dd&gt;</span>239 € <span class="nt">&lt;small&gt;</span>breakfast included, VAT not included<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;/dl&gt;</span>
</pre>
     </div>
     <div class="example" id="example-982296da">
      <a class="self-link" href="textlevel-semantics.html#example-982296da"></a> In this second example, the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-small" id="ref-for-elementdef-small-10">small</a></code> element is used for a side comment in an article. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Example Corp today announced record profits for the
second quarter <span class="nt">&lt;small&gt;</span>(Full Disclosure: Foo News is a subsidiary of
Example Corp)<span class="nt">&lt;/small&gt;</span>, leading to speculation about a third quarter
merger with Demo Group.<span class="nt">&lt;/p&gt;</span>
</pre>
      <p>This is distinct from a sidebar, which might be multiple paragraphs long and is removed from the
    main flow of text. In the following example, we see a sidebar from the same article. This
    sidebar also has small print, indicating the source of the information in the sidebar.</p>
<pre class="highlight"><span class="nt">&lt;aside&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Example Corp<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>This company mostly creates small software and Web
  sites.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p&gt;</span>The Example Corp company mission is "To provide entertainment
  and news on a sample basis".<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p&gt;&lt;small&gt;</span>Information obtained from <span class="nt">&lt;a</span>
  <span class="na">href=</span><span class="s">"https://example.com/about.html"</span><span class="nt">&gt;</span>example.com<span class="nt">&lt;/a&gt;</span> home
  page.<span class="nt">&lt;/small&gt;&lt;/p&gt;</span>
<span class="nt">&lt;/aside&gt;</span>
</pre>
      <p>In this last example, the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-small" id="ref-for-elementdef-small-11">small</a></code> element is marked as being <em>important</em> small print.</p>
<pre class="highlight"><span class="nt">&lt;p&gt;&lt;strong&gt;&lt;small&gt;</span>Continued use of this service will result in a kiss.<span class="nt">&lt;/small&gt;&lt;/strong&gt;&lt;/p&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.5.5" id="the-s-element"><span class="secno">4.5.5. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-s"><code>s</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-s-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-36">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-66">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-32">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-23">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-35">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-33">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-38">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-34">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-35">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-36">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-35">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-37">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-35">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-40">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-s" id="ref-for-elementdef-s-5">s</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-41">represents</a> contents that are no longer accurate or no longer
  relevant.</p>
     <p class="note" role="note"> The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-s" id="ref-for-elementdef-s-6">s</a></code> element is not appropriate when indicating document edits; to mark a span of
    text as having been removed from a document, use the <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-11">del</a></code> element. </p>
     <div class="example" id="example-62687ddc">
      <a class="self-link" href="textlevel-semantics.html#example-62687ddc"></a> In this example a recommended retail price has been marked as no longer relevant as the product
    in question has a new sale price. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Buy our Iced Tea and Lemonade!<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;s&gt;</span>Recommended retail price: $3.99 per bottle<span class="nt">&lt;/s&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;strong&gt;</span>Now selling for just $2.99 a bottle!<span class="nt">&lt;/strong&gt;&lt;/p&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.5.6" id="the-cite-element"><span class="secno">4.5.6. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-cite"><code>cite</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-cite-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-37">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-67">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-35">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-24">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-36">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-36">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-39">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-37">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-36">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-37">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-36">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-38">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-36">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-41">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-8">cite</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-42">represents</a> a reference to a creative work. It must include
  the title of the work or the name of the author (person, people or organization) or an URL
  reference, or a reference in abbreviated form as per the conventions used for the addition of
  citation metadata.</p>
     <p class="note" role="note"> Creative works include a book, a paper, an essay, a poem, a score, a song, a script, a film, a
    TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an
    exhibition, a legal case report, a computer program, , a web site, a web page, a blog post or
    comment, a forum post or comment, a tweet, a written or oral statement, etc. </p>
     <div class="example" id="example-db2e568e">
      <a class="self-link" href="textlevel-semantics.html#example-db2e568e"></a> Here is an example of the author of a quote referenced using the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-9">cite</a></code> element: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>In the words of <span class="nt">&lt;cite&gt;</span>Charles Bukowski<span class="nt">&lt;/cite&gt;</span> -
<span class="nt">&lt;q&gt;</span>An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.<span class="nt">&lt;/q&gt;&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-f45704ac">
      <a class="self-link" href="textlevel-semantics.html#example-f45704ac"></a> This second example identifies the author of a tweet by referencing the authors name using the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-10">cite</a></code> element: 
<pre class="highlight"><span class="nt">&lt;blockquote</span> <span class="na">class=</span><span class="s">"twitter-tweet"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>♥ Bukowski in <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://twitter.com/search?q=%23HTML5&amp;src=hash"</span><span class="nt">&gt;</span>#HTML5<span class="nt">&lt;/a&gt;</span> spec examples
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://t.co/0FIEiYN1pC"</span><span class="nt">&gt;</span>https://t.co/0FIEiYN1pC<span class="nt">&lt;/a&gt;&lt;/p&gt;</span><mark><span class="nt">&lt;cite&gt;</span>— karl dubost (@karlpro)
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://twitter.com/karlpro/statuses/370905307293442048"</span><span class="nt">&gt;</span>August 23, 2013<span class="nt">&lt;/a&gt;&lt;/cite&gt;</span></mark>
<span class="nt">&lt;/blockquote&gt;</span>
</pre>
     </div>
     <div class="example" id="example-e30dd0a2">
      <a class="self-link" href="textlevel-semantics.html#example-e30dd0a2"></a> In this example the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-11">cite</a></code> element is used to reference the title of a work in a
    bibliography: 
<pre class="highlight"><span class="nt">&lt;p&gt;&lt;cite&gt;</span>Universal Declaration of Human Rights<span class="nt">&lt;/cite&gt;</span>, United Nations,
December 1948. Adopted by General Assembly resolution 217 A (III).<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-b5a53de1">
      <a class="self-link" href="textlevel-semantics.html#example-b5a53de1"></a> In this example the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-12">cite</a></code> element is used to reference the title of a television
    show: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Who is your favorite doctor (in <span class="nt">&lt;cite&gt;</span>Doctor Who<span class="nt">&lt;/cite&gt;</span>)?<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-18a9a57a">
      <a class="self-link" href="textlevel-semantics.html#example-18a9a57a"></a> A very common use for the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-13">cite</a></code> element is to identify the author of a comment in a
    blog post or forum, as in this example: 
<pre class="highlight"><span class="nt">&lt;article</span> <span class="na">id=</span><span class="s">"comment-1"</span><span class="nt">&gt;</span>
  Comment by <span class="nt">&lt;cite&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://oli.jp"</span><span class="nt">&gt;</span>Oli Studholme<span class="nt">&lt;/a&gt;&lt;/cite&gt;</span>
  <span class="nt">&lt;time</span> <span class="na">datetime=</span><span class="s">"2013-08-19T16:01"</span><span class="nt">&gt;</span>August 19th, 2013 at 4:01 pm<span class="nt">&lt;/time&gt;</span>
  <span class="nt">&lt;p&gt;</span>Unfortunately I don’t think adding names back into the definition of <span class="nt">&lt;code&gt;</span>cite<span class="nt">&lt;/code&gt;</span>
  solves the problem: of the 12 blockquote examples in
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://oli.jp/example/blockquote-metadata/"</span><span class="nt">&gt;</span>Examples of block quote metadata<span class="nt">&lt;/a&gt;</span>,
  there’s not even one that’s <span class="nt">&lt;em&gt;</span>just<span class="nt">&lt;/em&gt;</span> a person’s name.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p&gt;</span>A subset of the problem, maybe…<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</pre>
     </div>
     <div class="example" id="example-cdc9efce">
      <a class="self-link" href="textlevel-semantics.html#example-cdc9efce"></a> Another common use for the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-14">cite</a></code> element is to reference the <code>URL</code> of a search result, as in this example: 
<pre class="highlight"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"resultStats"</span><span class="nt">&gt;</span>About 416,000,000 results 0.33 seconds)&nbsp;<span class="nt">&lt;/div&gt;</span>
...
<span class="nt">&lt;p&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://www.w3.org/html/wg/"</span><span class="nt">&gt;</span>W3C <span class="nt">&lt;i&gt;</span>HTML Working Group<span class="nt">&lt;/i&gt;&lt;/a&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span><mark><span class="nt">&lt;cite&gt;</span>www.w3.org/<span class="nt">&lt;b&gt;</span>html<span class="nt">&lt;/b&gt;</span>/wg/<span class="nt">&lt;/cite&gt;</span></mark><span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>15 Apr 2013 - The <span class="nt">&lt;i&gt;</span>HTML Working Group<span class="nt">&lt;/i&gt;</span> is currently chartered to continue its
work through 31 December 2014. A Plan 2014 document published by the...<span class="nt">&lt;/p&gt;</span>
...
</pre>
     </div>
     <div class="example" id="example-939422b7">
      <a class="self-link" href="textlevel-semantics.html#example-939422b7"></a> Where the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-15">cite</a></code> element is used to identify an abbreviated reference such as <i>Ibid.</i> it is suggested that this reference be linked to the base reference: 
<pre class="highlight"><span class="nt">&lt;article&gt;</span>
  <span class="nt">&lt;h2&gt;</span>Book notes<span class="nt">&lt;/h2&gt;</span>
  ...
  ...
  <span class="nt">&lt;blockquote&gt;</span>"Money is the real cause of poverty,"
  <span class="nt">&lt;footer&gt;</span>
  <span class="nt">&lt;cite</span> <span class="na">id=</span><span class="s">"baseref"</span><span class="nt">&gt;</span>The Ragged-Trousered Philanthropists, page 89.<span class="nt">&lt;/cite&gt;</span>
  <span class="nt">&lt;/footer&gt;</span>
  <span class="nt">&lt;/blockquote&gt;</span>
  ...
  ...
  <span class="nt">&lt;blockquote&gt;</span>"Money is the cause of poverty because it is the device by which those who
  are too lazy to work are enabled to rob the workers of the fruits of their labour."
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#baseref"</span><span class="nt">&gt;&lt;cite&gt;</span>Ibid.<span class="nt">&lt;/cite&gt;&lt;/a&gt;</span>
  <span class="nt">&lt;/blockquote&gt;</span>
  ...
<span class="nt">&lt;/article&gt;</span>
</pre>
     </div>
     <p class="note" role="note"> A <em>citation</em> is not a <em>quote</em> (for which the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-6">q</a></code> element is
    appropriate). </p>
     <div class="example" id="example-c0173a49">
      <a class="self-link" href="textlevel-semantics.html#example-c0173a49"></a> This is incorrect usage, because <code>cite</code> is not for quotes: 
<pre class="bad">&lt;p&gt;&lt;cite&gt;This is wrong!, said Hillary.&lt;/cite&gt; is a quote from the
popular daytime TV drama When Ian became Hillary.&lt;/p&gt;
</pre>
      <p>This is an example of the correct usage:</p>
<pre class="highlight"><span class="nt">&lt;p&gt;&lt;q&gt;</span>This is correct, said Hillary.<span class="nt">&lt;/q&gt;</span> is a quote from the
popular daytime TV drama <span class="nt">&lt;cite&gt;</span>When Ian became Hillary<span class="nt">&lt;/cite&gt;</span>.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.5.7" id="the-q-element"><span class="secno">4.5.7. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-q"><code>q</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-q-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-38">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-68">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-38">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-25">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-37">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-39">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-40">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-40">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-37">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-38">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-37">Global attributes</a>
      </dd><dd> <code>cite</code> - Link to the source of the quotation or more information about the edit 
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-39">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-37">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="grouping-content.html#htmlquoteelement-htmlquoteelement" id="ref-for-htmlquoteelement-htmlquoteelement-1">HTMLQuoteElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-7">q</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-43">represents</a> some <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-41">phrasing content</a> quoted from another
  source.</p>
     <p>Quotation punctuation (such as quotation marks) that is quoting the contents of the element must
  not appear immediately before, after, or inside <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-8">q</a></code> elements; they will be inserted
  into the rendering by the user agent.</p>
     <p>Content inside a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-9">q</a></code> element must be quoted from another source, whose address, if it
  has one, may be cited in the <dfn class="dfn-paneled" data-dfn-for="q" data-dfn-type="element-attr" data-export="" id="element-attrdef-q-cite"><code>cite</code></dfn> attribute. The source may be fictional,
  as when quoting characters in a novel or screenplay.</p>
     <p>If the <code><a data-link-type="element-sub" href="textlevel-semantics.html#element-attrdef-q-cite" id="ref-for-element-attrdef-q-cite-1">cite</a></code> attribute is present, it must be a <a data-link-type="dfn" href="infrastructure.html#valid-url-potentially-surrounded-by-spaces" id="ref-for-valid-url-potentially-surrounded-by-spaces-3">valid URL potentially surrounded by spaces</a>. To obtain the corresponding citation link, the
  value of the attribute must be <a data-link-type="dfn" href="infrastructure.html#reparsed" id="ref-for-reparsed-12">parsed</a> relative to the element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>.
  User agents may allow users to follow such citation links, but they are primarily intended for
  private use (e.g., by server-side scripts collecting statistics about a site’s use of quotations),
  not for readers.</p>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-10">q</a></code> element must not be used in place of quotation marks that do not represent
  quotes; for example, it is inappropriate to use the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-11">q</a></code> element for marking up
  sarcastic statements.</p>
     <p>The use of <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-12">q</a></code> elements to mark up quotations is entirely optional; using explicit
  quotation punctuation without <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-13">q</a></code> elements is just as correct.</p>
     <div class="example" id="example-da134371">
      <a class="self-link" href="textlevel-semantics.html#example-da134371"></a> Here is a simple example of the use of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-14">q</a></code> element: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The man said <span class="nt">&lt;q&gt;</span>Things that are impossible just take
longer<span class="nt">&lt;/q&gt;</span>. I disagreed with him.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-bfe6c934">
      <a class="self-link" href="textlevel-semantics.html#example-bfe6c934"></a> Here is an example with both an explicit citation link in the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-15">q</a></code> element, and an
    explicit citation outside: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The W3C page <span class="nt">&lt;cite&gt;</span>About W3C<span class="nt">&lt;/cite&gt;</span> says the W3C’s
mission is <span class="nt">&lt;q</span> <span class="na">cite=</span><span class="s">"https://www.w3.org/Consortium/"</span><span class="nt">&gt;</span>To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web<span class="nt">&lt;/q&gt;</span>. I
disagree with this mission.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-f5e587f9">
      <a class="self-link" href="textlevel-semantics.html#example-f5e587f9"></a> In the following example, the quotation itself contains a quotation: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>In <span class="nt">&lt;cite&gt;</span>Example One<span class="nt">&lt;/cite&gt;</span>, he writes <span class="nt">&lt;q&gt;</span>The man
said <span class="nt">&lt;q&gt;</span>Things that are impossible just take longer<span class="nt">&lt;/q&gt;</span>. I
disagreed with him<span class="nt">&lt;/q&gt;</span>. Well, I disagree even more!<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-5e9352bc">
      <a class="self-link" href="textlevel-semantics.html#example-5e9352bc"></a> In the following example, quotation marks are used instead of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-16">q</a></code> element: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>His best argument was ❝I disagree❞, which
I thought was laughable.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-e9a282c0">
      <a class="self-link" href="textlevel-semantics.html#example-e9a282c0"></a> In the following example, there is no quote — the quotation marks are used to name a
    word. Use of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-17">q</a></code> element in this case would be inappropriate. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The word "ineffable" could have been used to describe the disaster
resulting from the campaign’s mismanagement.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.5.8" id="the-dfn-element"><span class="secno">4.5.8. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-dfn"><code>dfn</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-dfn-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-39">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-69">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-42">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-26">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-38">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-43">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-41">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-44">Phrasing content</a>, but there must be no <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-7">dfn</a></code> element descendants.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-38">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-39">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-38">Global attributes</a>
      </dd><dd>Also, the <code><a data-link-type="element-sub" href="textlevel-semantics.html#element-attrdef-dfn-title" id="ref-for-element-attrdef-dfn-title-1">title</a></code> attribute has special semantics on this element.
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-40">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-38">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-42">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-8">dfn</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-44">represents</a> the defining instance of a term. The <a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-25">paragraph</a>, <a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-22">description list group</a>, or <a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-22">section</a> that is the nearest ancestor of
  the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-9">dfn</a></code> element must also contain the definition(s) for the <a data-link-type="dfn" href="textlevel-semantics.html#defines-the-term" id="ref-for-defines-the-term-1">term</a> given by the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-10">dfn</a></code> element.</p>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="defines the term|defining term|term" data-noexport="" id="defines-the-term">Defining term</dfn>: If the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-11">dfn</a></code> element has a <dfn class="dfn-paneled" data-dfn-for="dfn" data-dfn-type="element-attr" data-export="" id="element-attrdef-dfn-title"><code>title</code></dfn> attribute, then the exact value of that attribute is the term being defined. Otherwise, if it
  contains exactly one element child node and no child <code>Text</code> nodes, and that child
  element is an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-abbr" id="ref-for-elementdef-abbr-6">abbr</a></code> element with a <code>title</code> attribute, then the exact value
  of <em>that</em> attribute is the term being defined. Otherwise, it is the exact <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-12">dfn</a></code> element that gives the term being defined.</p>
     <p>If the <code>title</code> attribute of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-13">dfn</a></code> element is present, then it must
  contain only the term being defined.</p>
     <p class="note" role="note"> The <code>title</code> attribute of ancestor elements does not affect <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-14">dfn</a></code> elements. </p>
     <p>An <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-32">a</a></code> element that links to a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-15">dfn</a></code> element represents an instance of the
  term defined by the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-16">dfn</a></code> element.</p>
     <div class="example" id="example-2d707364">
      <a class="self-link" href="textlevel-semantics.html#example-2d707364"></a> In the following fragment, the term "Garage Door Opener" is first defined in the first
    paragraph, then used in the second. In both cases, its abbreviation is what is actually
    displayed. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The <span class="nt">&lt;dfn&gt;&lt;abbr</span> <span class="na">title=</span><span class="s">"Garage Door Opener"</span><span class="nt">&gt;</span>GDO<span class="nt">&lt;/abbr&gt;&lt;/dfn&gt;</span>
is a device that allows off-world teams to open the iris.<span class="nt">&lt;/p&gt;</span>
<span class="c">&lt;!-- ... later in the document: --&gt;</span>
<span class="nt">&lt;p&gt;</span>Teal’c activated his <span class="nt">&lt;abbr</span> <span class="na">title=</span><span class="s">"Garage Door Opener"</span><span class="nt">&gt;</span>GDO<span class="nt">&lt;/abbr&gt;</span>
and so Hammond ordered the iris to be opened.<span class="nt">&lt;/p&gt;</span>
</pre>
      <p>With the addition of an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-33">a</a></code> element, the reference can be made explicit:</p>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The <span class="nt">&lt;dfn</span> <span class="na">id=</span><span class="s">gdo</span><span class="nt">&gt;&lt;abbr</span> <span class="na">title=</span><span class="s">"Garage Door Opener"</span><span class="nt">&gt;</span>GDO<span class="nt">&lt;/abbr&gt;&lt;/dfn&gt;</span>
is a device that allows off-world teams to open the iris.<span class="nt">&lt;/p&gt;</span>
<span class="c">&lt;!-- ... later in the document: --&gt;</span>
<span class="nt">&lt;p&gt;</span>Teal’c activated his <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">#gdo</span><span class="nt">&gt;&lt;abbr</span> <span class="na">title=</span><span class="s">"Garage Door Opener"</span><span class="nt">&gt;</span>GDO<span class="nt">&lt;/abbr&gt;&lt;/a&gt;</span>
and so Hammond ordered the iris to be opened.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.5.9" id="the-abbr-element"><span class="secno">4.5.9. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-abbr"><code>abbr</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-abbr-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-40">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-70">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-45">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-27">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-39">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-46">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-42">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-47">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-39">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-40">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-39">Global attributes</a>
      </dd><dd>Also, the <code><a data-link-type="element-sub" href="textlevel-semantics.html#element-attrdef-abbr-title" id="ref-for-element-attrdef-abbr-title-1">title</a></code> attribute has special semantics on this element.
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-41">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-39">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-43">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-abbr" id="ref-for-elementdef-abbr-7">abbr</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-45">represents</a> an abbreviation or acronym, optionally with its
  expansion. The <dfn class="dfn-paneled" data-dfn-for="abbr" data-dfn-type="element-attr" data-export="" id="element-attrdef-abbr-title"><code>title</code></dfn> attribute may be used to provide an expansion of the
  abbreviation. The attribute, if specified, must contain an expansion of the abbreviation, and
  nothing else.</p>
     <div class="example" id="example-17469525">
      <a class="self-link" href="textlevel-semantics.html#example-17469525"></a> The paragraph below contains an abbreviation marked up with the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-abbr" id="ref-for-elementdef-abbr-8">abbr</a></code> element.
    This paragraph <a data-link-type="dfn" href="textlevel-semantics.html#defines-the-term" id="ref-for-defines-the-term-2">defines the term</a> "Web Hypertext Application
    Technology Working Group". 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The <span class="nt">&lt;dfn</span> <span class="na">id=</span><span class="s">whatwg</span><span class="nt">&gt;&lt;abbr</span>
<span class="na">title=</span><span class="s">"Web Hypertext Application Technology Working Group"</span><span class="nt">&gt;</span>WHATWG<span class="nt">&lt;/abbr&gt;&lt;/dfn&gt;</span>
is a loose unofficial collaboration of Web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.<span class="nt">&lt;/p&gt;</span>
</pre>
      <p>An alternative way to write this would be:</p>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The <span class="nt">&lt;dfn</span> <span class="na">id=</span><span class="s">whatwg</span><span class="nt">&gt;</span>Web Hypertext Application Technology
Working Group<span class="nt">&lt;/dfn&gt;</span> (<span class="nt">&lt;abbr</span>
<span class="na">title=</span><span class="s">"Web Hypertext Application Technology Working Group"</span><span class="nt">&gt;</span>WHATWG<span class="nt">&lt;/abbr&gt;</span>)
is a loose unofficial collaboration of Web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-dc067d03">
      <a class="self-link" href="textlevel-semantics.html#example-dc067d03"></a> This paragraph has two abbreviations. Notice how only one is defined; the other, with no
    expansion associated with it, does not use the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-abbr" id="ref-for-elementdef-abbr-9">abbr</a></code> element. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The
<span class="nt">&lt;abbr</span> <span class="na">title=</span><span class="s">"Web Hypertext Application Technology Working Group"</span><span class="nt">&gt;</span>WHATWG<span class="nt">&lt;/abbr&gt;</span>
started working on HTML in 2004.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-074999fc">
      <a class="self-link" href="textlevel-semantics.html#example-074999fc"></a> This paragraph links an abbreviation to its definition. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#whatwg"</span><span class="nt">&gt;&lt;abbr</span>
<span class="na">title=</span><span class="s">"Web Hypertext Application Technology Working Group"</span><span class="nt">&gt;</span>WHATWG<span class="nt">&lt;/abbr&gt;&lt;/a&gt;</span>
community does not have much representation from Asia.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-cb201c83">
      <a class="self-link" href="textlevel-semantics.html#example-cb201c83"></a> This paragraph marks up an abbreviation without giving an expansion, possibly as a hook to
    apply styles for abbreviations (e.g., smallcaps). 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Philip and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the <span class="nt">&lt;abbr&gt;</span>WHATWG<span class="nt">&lt;/abbr&gt;</span> issue graph.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <p>If an abbreviation is pluralized, the expansion’s grammatical number (plural vs singular) must
  match the grammatical number of the contents of the element.</p>
     <div class="example" id="example-ce8c0540">
      <a class="self-link" href="textlevel-semantics.html#example-ce8c0540"></a> Here the plural is outside the element, so the expansion is in the singular: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Two <span class="nt">&lt;abbr</span> <span class="na">title=</span><span class="s">"Working Group"</span><span class="nt">&gt;</span>WG<span class="nt">&lt;/abbr&gt;</span>s worked on
this specification: the <span class="nt">&lt;abbr&gt;</span>WHATWG<span class="nt">&lt;/abbr&gt;</span> and the
<span class="nt">&lt;abbr&gt;</span>HTMLWG<span class="nt">&lt;/abbr&gt;</span>.<span class="nt">&lt;/p&gt;</span>
</pre>
      <p>Here the plural is inside the element, so the expansion is in the plural:</p>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Two <span class="nt">&lt;abbr</span> <span class="na">title=</span><span class="s">"Working Groups"</span><span class="nt">&gt;</span>WGs<span class="nt">&lt;/abbr&gt;</span> worked on
this specification: the <span class="nt">&lt;abbr&gt;</span>WHATWG<span class="nt">&lt;/abbr&gt;</span> and the
<span class="nt">&lt;abbr&gt;</span>HTMLWG<span class="nt">&lt;/abbr&gt;</span>.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <p>Abbreviations do not have to be marked up using this element. It is expected to be useful in the
  following cases:</p>
     <ul>
      <li data-md="">
       <p>Abbreviations for which the author wants to give expansions, where using the <code>abbr</code> element with a <code>title</code> attribute is an alternative to including the expansion inline
(e.g., in parentheses).</p>
      </li><li data-md="">
       <p>Abbreviations that are likely to be unfamiliar to the document’s readers, for which authors are
encouraged to either mark up the abbreviation using an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-abbr" id="ref-for-elementdef-abbr-10">abbr</a></code> element with a <code>title</code> attribute or include the expansion inline in the text the first time the
abbreviation is used.</p>
      </li><li data-md="">
       <p>Abbreviations whose presence needs to be semantically annotated, e.g., so that they can be
identified from a style sheet and given specific styles, for which the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-abbr" id="ref-for-elementdef-abbr-11">abbr</a></code> element
can be used without a <code>title</code> attribute.</p>
     </li></ul>
     <p>Providing an expansion in a <code>title</code> attribute once will not necessarily cause other <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-abbr" id="ref-for-elementdef-abbr-12">abbr</a></code> elements in the same document with the same contents but without a <code>title</code> attribute to behave as if they had the same expansion. Every <code>abbr</code> element is independent.</p>
     <h4 class="heading settled" data-level="4.5.10" id="the-ruby-element"><span class="secno">4.5.10. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-ruby"><code>ruby</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-ruby-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-41">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-71">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-48">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-28">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-40">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-49">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-43">Content model</a>:
      </dt><dd>See prose.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-40">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-41">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-40">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-42">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-40">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-44">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-6">ruby</a></code> element allows one or more spans of phrasing content to be marked with ruby
  annotations. Ruby annotations are short runs of text presented alongside base text, primarily
  used in East Asian typography as a guide for pronunciation or to include other annotations. In
  Japanese, this form of typography is also known as <i>furigana</i>. Ruby text can appear on either
  side, and sometimes both sides, of the base text, and it is possible to control its position using
  CSS. A more complete introduction to ruby can be found in the <cite>Use Cases &amp; Exploratory
  Approaches for Ruby Markup</cite> document as well as in <cite>CSS Ruby</cite>. <a data-link-type="biblio" href="references.html#biblio-ruby-uc">[RUBY-UC]</a> <a data-link-type="biblio" href="references.html#biblio-css3-ruby">[CSS3-RUBY]</a></p>
     <p>The content model of <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-7">ruby</a></code> elements consists of one or more of the following sequences:</p>
     <ol>
      <li data-md="">
       <p>One or more <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-50">phrasing content</a> nodes or <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rb" id="ref-for-elementdef-rb-1">rb</a></code> elements.</p>
      </li><li data-md="">
       <p>One or more <code>rt</code> or <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-1">rtc</a></code> elements, each of which either immediately
  preceded or followed by an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-1">rp</a></code> elements.</p>
     </li></ol>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-8">ruby</a></code>, <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rb" id="ref-for-elementdef-rb-2">rb</a></code>, <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-2">rtc</a></code>, and <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-3">rt</a></code> elements can be used
  for a variety of kinds of annotations, including in particular (though by no means limited to)
  those described below. For more details on Japanese Ruby in particular, and how to render Ruby for
  Japanese, see <cite>Requirements for Japanese Text Layout</cite>. <a data-link-type="biblio" href="references.html#biblio-jlreq">[JLREQ]</a> The <code>rp</code> element can be used as fallback content when ruby rendering is not supported.</p>
     <dl>
      <dt data-md="">
       <p>Mono-ruby for individual base characters</p>
      </dt><dd data-md="">
       <p>Annotations (the ruby text) are associated individually with each ideographic character (the
  base text). In Japanese this is typically hiragana or katakana characters used to provide
  readings of kanji characters.</p>
       <div class="example" id="example-1369e4ff">
        <a class="self-link" href="textlevel-semantics.html#example-1369e4ff"></a> 
<pre class="highlight"><span class="nt">&lt;ruby&gt;</span>base<span class="nt">&lt;rt&gt;</span>annotation<span class="nt">&lt;/ruby&gt;</span>
</pre>
       </div>
       <p>When no <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rb" id="ref-for-elementdef-rb-3">rb</a></code> element is used, the base is implied, as above. But you can also make
  it explicit. This can be useful notably for styling, or when consecutive bases are to be
  treated as a group, as in the jukugo ruby example further down.</p>
       <div class="example" id="example-3bf58249">
        <a class="self-link" href="textlevel-semantics.html#example-3bf58249"></a> 
<pre class="highlight"><span class="nt">&lt;ruby&gt;&lt;rb&gt;</span>base<span class="nt">&lt;rt&gt;</span>annotation<span class="nt">&lt;/ruby&gt;</span>
</pre>
       </div>
       <p>In the following example, notice how each annotation corresponds to a single base character.</p>
       <div class="example" id="example-5f5dd46e">
        <a class="self-link" href="textlevel-semantics.html#example-5f5dd46e"></a> 
<pre class="highlight"><span class="nt">&lt;ruby&gt;</span>日<span class="nt">&lt;rt&gt;</span>に<span class="nt">&lt;/rt&gt;&lt;/ruby&gt;&lt;ruby&gt;</span>本<span class="nt">&lt;rt&gt;</span>ほん<span class="nt">&lt;/rt&gt;&lt;/ruby&gt;</span>
<span class="nt">&lt;ruby&gt;</span>語<span class="nt">&lt;rt&gt;</span>ご<span class="nt">&lt;/rt&gt;&lt;/ruby&gt;</span>で<span class="nt">&lt;ruby&gt;</span>書<span class="nt">&lt;rt&gt;</span>か<span class="nt">&lt;/rt&gt;&lt;/ruby&gt;</span>
いた<span class="nt">&lt;ruby&gt;</span>作<span class="nt">&lt;rt&gt;</span>さく<span class="nt">&lt;/rt&gt;&lt;/ruby&gt;&lt;ruby&gt;</span>文<span class="nt">&lt;rt&gt;</span>ぶん<span class="nt">&lt;/rt&gt;&lt;/ruby&gt;</span>です。
</pre>
       </div>
       <p>Ruby text interspersed in regular text provides structure akin to the following image:</p>
       <p><img alt="An example of ruby text mixed up with regular text." height="87" src="images/composition.png" width="390"></p>
       <p>This example can also be written as follows, using one <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-9">ruby</a></code> element with two
  segments of base text and two annotations (one for each) rather than two back-to-back <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-10">ruby</a></code> elements each with one base text segment and annotation (as in the markup
  above):</p>
       <div class="example" id="example-3a18c5cc">
        <a class="self-link" href="textlevel-semantics.html#example-3a18c5cc"></a> 
<pre class="highlight"><span class="nt">&lt;ruby&gt;</span>日<span class="nt">&lt;rt&gt;</span>に<span class="nt">&lt;/rt&gt;</span>本<span class="nt">&lt;rt&gt;</span>ほん<span class="nt">&lt;/rt&gt;</span>語<span class="nt">&lt;rt&gt;</span>ご<span class="nt">&lt;/rt&gt;&lt;/ruby&gt;</span>
で<span class="nt">&lt;ruby&gt;</span>書<span class="nt">&lt;rt&gt;</span>か<span class="nt">&lt;/rt&gt;&lt;/ruby&gt;</span>
いた<span class="nt">&lt;ruby&gt;</span>作<span class="nt">&lt;rt&gt;</span>さく<span class="nt">&lt;/rt&gt;</span>文<span class="nt">&lt;rt&gt;</span>ぶん<span class="nt">&lt;/rt&gt;&lt;/ruby&gt;</span>です。
</pre>
       </div>
       <dl>
        <dt data-md="">
         <p>Group ruby</p>
        </dt><dd data-md="">
         <p>Group ruby is often used where phonetic annotations don’t map to discreet base characters, or
for semantic glosses that span the whole base text. For example, the word "today" is written
with the characters 今日, literally "this day". But it’s pronounced きょう (kyou), which
can’t be broken down into a "this" part and a "day" part. In typical rendering, you can’t
split text that is annotated with group ruby; it has to wrap as a single unit onto the next
line. When a <a data-link-type="dfn" href="textlevel-semantics.html#ruby-text-annotations" id="ref-for-ruby-text-annotations-1">ruby text annotation</a> maps to a base that is comprised of more than one
character, then that base is grouped.</p>
         <p>The following group ruby:</p>
         <p><img alt="Group ruby example with きょう annotating 今日" height="88" src="images/group.png" width="78"></p>
         <p>Can be marked up as follows:</p>
         <div class="example" id="example-68215193">
          <a class="self-link" href="textlevel-semantics.html#example-68215193"></a> 
<pre class="highlight"><span class="nt">&lt;ruby&gt;</span>今日<span class="nt">&lt;rt&gt;</span>きょう<span class="nt">&lt;/ruby&gt;</span>
</pre>
         </div>
        </dd><dt data-md="">
         <p>Jukugo ruby</p>
        </dt><dd data-md="">
         <p><em>Jukugo</em> refers to a Japanese compound noun, i.e., a word made up of more than one
kanji character. <em>Jukugo ruby</em> is a term that is used not to describe ruby
annotations over jukugo text, but rather to describe ruby with a behavior slightly
different from mono or group ruby. Jukugo ruby is similar to mono ruby, in that there is
a strong association between ruby text and individual base characters, but the ruby text
is typically rendered as grouped together over multiple ideographs when they are on the
same line.</p>
         <p>The distinction is captured in this example:</p>
         <p><img alt="Example of jukugo ruby" height="126" src="images/hokekyou.png" width="66"></p>
         <p>Which can be marked up as follows:</p>
         <div class="example" id="example-8ef75d00">
          <a class="self-link" href="textlevel-semantics.html#example-8ef75d00"></a> 
<pre class="highlight"><span class="nt">&lt;ruby&gt;</span>法<span class="nt">&lt;rb&gt;</span>華<span class="nt">&lt;rb&gt;</span>経<span class="nt">&lt;rt&gt;</span>ほ<span class="nt">&lt;rt&gt;</span>け<span class="nt">&lt;rt&gt;</span>きょう<span class="nt">&lt;/ruby&gt;</span>
</pre>
         </div>
         <p>In this example, each <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-4">rt</a></code> element is paired with its respective <code>rb</code> element, the difference with an interleaved <code>rb</code>/<code>rt</code> approach being
that the sequences of both base text and ruby annotations are implicitly placed in common
containers so that the grouping information is captured.</p>
         <p class="note" role="note"> For more details on <a data-link-type="dfn" href="https://www.w3.org/TR/jlreq/#positioning_of_jukugoruby">Jukugo Ruby rendering</a>, see Appendix F in the <cite>Requirements for Japanese Text Layout</cite> and Use Case C: Jukugo ruby in the <cite>Use Cases &amp; Exploratory Approaches for Ruby Markup</cite>. <a data-link-type="biblio" href="references.html#biblio-jlreq">[JLREQ]</a> <a data-link-type="biblio" href="references.html#biblio-ruby-uc">[RUBY-UC]</a> </p>
        </dd><dt data-md="">
         <p>Inline ruby</p>
        </dt><dd data-md="">
         <p>In some contexts, for instance when the font size or line height are too small for ruby to be
readable, it is desirable to inline the ruby annotation such that it appears in parentheses
after the text it annotates. This also provides a convenient fallback strategy for user
agents that do not support rendering ruby annotations.</p>
         <p>Inlining takes grouping into account. For example, Tokyo is written with two kanji
characters, 東, which is pronounced とう, and 京, which is pronounced きょう. Each base
character should be annotated individually, but the fallback should be 東京(とうきょう) not
東(とう)京(きょう). This can be marked up as follows:</p>
         <div class="example" id="example-b9ddaf86">
          <a class="self-link" href="textlevel-semantics.html#example-b9ddaf86"></a> 
<pre class="highlight"><span class="nt">&lt;ruby&gt;</span>東<span class="nt">&lt;rb&gt;</span>京<span class="nt">&lt;rt&gt;</span>とう<span class="nt">&lt;rt&gt;</span>きょう<span class="nt">&lt;/ruby&gt;</span>
</pre>
         </div>
         <p>Note that the above markup will enable the usage of parentheses when inlining for browsers
that support ruby layout, but for those that don’t it will fail to provide parenthetical
fallback. This is where the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-2">rp</a></code> element is useful. It can be inserted into the
above example to provide the appropriate fallback when ruby layout is not supported:</p>
       </dd></dl>
       <div class="example" id="example-3f7229fe">
        <a class="self-link" href="textlevel-semantics.html#example-3f7229fe"></a> 
<pre class="highlight"><span class="nt">&lt;ruby&gt;</span>東<span class="nt">&lt;rb&gt;</span>京<span class="nt">&lt;rp&gt;</span>(<span class="nt">&lt;rt&gt;</span>とう<span class="nt">&lt;rt&gt;</span>きょう<span class="nt">&lt;rp&gt;</span>)<span class="nt">&lt;/ruby&gt;</span>
</pre>
       </div>
       <dl>
        <dt data-md="">
         <p>Text with both phonetic and semantic annotations (double-sided ruby)</p>
        </dt><dd data-md="">
         <p>Sometimes, ruby can be used to annotate a base twice.</p>
         <p>In the following example, the Chinese word for San Francisco (旧金山, i.e., "old gold
mountain") is annotated both using pinyin to give the pronunciation, and with the original
English.</p>
         <p><img alt="San Francisco in Chinese, with both pinyin and the original English as annotations." height="84" src="images/group-double.png" width="113"></p>
         <p>Which is marked up as follows:</p>
         <div class="example" id="example-2db60dff">
          <a class="self-link" href="textlevel-semantics.html#example-2db60dff"></a> 
<pre class="highlight"><span class="nt">&lt;ruby&gt;&lt;rb&gt;</span>旧<span class="nt">&lt;rb&gt;</span>金<span class="nt">&lt;rb&gt;</span>山<span class="nt">&lt;rt&gt;</span>jiù<span class="nt">&lt;rt&gt;</span>jīn<span class="nt">&lt;rt&gt;</span>shān<span class="nt">&lt;rtc&gt;</span>San Francisco<span class="nt">&lt;/ruby&gt;</span>
</pre>
         </div>
         <p>In this example, a single base run of three base characters is annotated with three pinyin
  ruby text segments in a first (implicit) container, and an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-3">rtc</a></code> element is
  introduced in order to provide a second single <a data-link-type="dfn" href="textlevel-semantics.html#ruby-text-annotations" id="ref-for-ruby-text-annotations-2">ruby text annotation</a> being the
  city’s English name.</p>
         <p>We can also revisit our jukugo example above with 上手 ("skill") to show how it can be
  annotation in both kana and romaji phonetics while at the same time maintaining the
  pairing to bases and annotation grouping information.</p>
         <p><img alt="上手 (&quot;skill&quot;) annotated in both kana and romaji, shown in both jukugo and mono styles." height="120" src="images/mono-or-jukugo-double.png" width="185"></p>
         <p>Which is marked up as follows:</p>
         <div class="example" id="example-7afbc3d8">
          <a class="self-link" href="textlevel-semantics.html#example-7afbc3d8"></a> 
<pre class="highlight"><span class="nt">&lt;ruby&gt;&lt;rb&gt;</span>上<span class="nt">&lt;rb&gt;</span>手<span class="nt">&lt;rt&gt;</span>じよう<span class="nt">&lt;rt&gt;</span>ず<span class="nt">&lt;rtc&gt;&lt;rt&gt;</span>jou<span class="nt">&lt;rt&gt;</span>zu<span class="nt">&lt;/ruby&gt;</span>
</pre>
         </div>
         <p>Text that is a direct child of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-4">rtc</a></code> element implicitly produces a ruby text
segment as if it were contained in an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-5">rt</a></code> element. In this contrived example,
this is shown with some symbols that are given names in English and French with annotations
intended to appear on either side of the base symbol.</p>
         <div class="example" id="example-2148d5a2">
          <a class="self-link" href="textlevel-semantics.html#example-2148d5a2"></a> 
<pre class="highlight"><span class="nt">&lt;ruby&gt;</span>
  ♥<span class="nt">&lt;rt&gt;</span>Heart<span class="nt">&lt;rtc</span> <span class="na">lang=</span><span class="s">fr</span><span class="nt">&gt;</span>Cœur<span class="nt">&lt;/rtc&gt;</span>
  ☘<span class="nt">&lt;rt&gt;</span>Shamrock<span class="nt">&lt;rtc</span> <span class="na">lang=</span><span class="s">fr</span><span class="nt">&gt;</span>Trèfle<span class="nt">&lt;/rtc&gt;</span>
  ✶<span class="nt">&lt;rt&gt;</span>Star<span class="nt">&lt;rtc</span> <span class="na">lang=</span><span class="s">fr</span><span class="nt">&gt;</span>Étoile
<span class="nt">&lt;/ruby&gt;</span>
</pre>
         </div>
         <p>Similarly, text directly inside a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-11">ruby</a></code> element implicitly produces a ruby base
as if it were contained in an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rb" id="ref-for-elementdef-rb-4">rb</a></code> element, and <code>rt</code> children of <code>ruby</code> are implicitly contained in an <code>rtc</code> container. In effect, the
above example is equivalent (in meaning, though not in the DOM it produces) to the
following:</p>
         <div class="example" id="example-ba02527d">
          <a class="self-link" href="textlevel-semantics.html#example-ba02527d"></a> 
<pre class="highlight"><span class="nt">&lt;ruby&gt;</span>
  <span class="nt">&lt;rb&gt;</span>♥<span class="nt">&lt;/rb&gt;&lt;rtc&gt;&lt;rt&gt;</span>Heart<span class="nt">&lt;/rt&gt;&lt;/rtc&gt;&lt;rtc</span> <span class="na">lang=</span><span class="s">fr</span><span class="nt">&gt;&lt;rt&gt;</span>Cœur<span class="nt">&lt;/rt&gt;&lt;/rtc&gt;</span>
  <span class="nt">&lt;rb&gt;</span>☘<span class="nt">&lt;/rb&gt;&lt;rtc&gt;&lt;rt&gt;</span>Shamrock<span class="nt">&lt;/rt&gt;&lt;/rtc&gt;&lt;rtc</span> <span class="na">lang=</span><span class="s">fr</span><span class="nt">&gt;&lt;rt&gt;</span>Trèfle<span class="nt">&lt;/rt&gt;&lt;/rtc&gt;</span>
  <span class="nt">&lt;rb&gt;</span>✶<span class="nt">&lt;/rb&gt;&lt;rtc&gt;&lt;rt&gt;</span>Star<span class="nt">&lt;/rt&gt;&lt;/rtc&gt;&lt;rtc</span> <span class="na">lang=</span><span class="s">fr</span><span class="nt">&gt;&lt;rt&gt;</span>Étoile<span class="nt">&lt;/rt&gt;&lt;/rtc&gt;</span>
<span class="nt">&lt;/ruby&gt;</span>
</pre>
         </div>
       </dd></dl>
     </dd></dl>
     <hr>
     <div class="impl">
       Within a ruby element, content is parcelled into a series of ruby segments. Each <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="ruby-segment">ruby segment</dfn> is described by: 
      <ul>
       <li data-md="">
        <p>Zero or more <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="ruby-bases">ruby bases</dfn>, each of which is a DOM range that may contain phrasing
  content or an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rb" id="ref-for-elementdef-rb-5">rb</a></code> element.</p>
       </li><li data-md="">
        <p>A base range, that is a DOM range including all the bases. This is the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="ruby-base-container">ruby base container</dfn>.</p>
       </li><li data-md="">
        <p>Zero or more <a data-link-type="dfn" href="textlevel-semantics.html#ruby-text-container" id="ref-for-ruby-text-container-1">ruby text containers</a> which may correspond to explicit <code>rtc</code> elements, or to sequences of <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-6">rt</a></code> elements implicitly recognized as contained
  in an anonymous <a data-link-type="dfn" href="textlevel-semantics.html#ruby-text-container" id="ref-for-ruby-text-container-2">ruby text container</a>.</p>
      </li></ul>
      <p>Each <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="ruby-text-container">ruby text container</dfn> is described by zero or more <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="ruby-text-annotations">ruby text annotations</dfn> each of which is a DOM range that may contain phrasing content
    or an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-7">rt</a></code> element, and an annotations range that is a range including all the
    annotations for that container. A <a data-link-type="dfn" href="textlevel-semantics.html#ruby-text-container" id="ref-for-ruby-text-container-3">ruby text container</a> is also known (primarily in a CSS
    context) as a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="ruby-annotation-container">ruby annotation container</dfn>.</p>
      <p>Furthermore, a ruby element contains <dfn data-dfn-type="dfn" data-noexport="" id="ignored-ruby-content">ignored ruby content<a class="self-link" href="textlevel-semantics.html#ignored-ruby-content"></a></dfn>. Ignored ruby content does
    not form part of the document’s semantics. It consists of some <a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-11">inter-element whitespace</a> and <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-3">rp</a></code> elements, the latter of which are used for legacy user agents that do not
    support ruby at all.</p>
      <p>The process of <dfn data-dfn-type="dfn" data-noexport="" id="annotation-pairing">annotation pairing<a class="self-link" href="textlevel-semantics.html#annotation-pairing"></a></dfn> associates <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-annotation-box">ruby annotations</a> with <a data-link-type="dfn" href="textlevel-semantics.html#ruby-bases" id="ref-for-ruby-bases-1">ruby bases</a>. Within each <a data-link-type="dfn" href="textlevel-semantics.html#ruby-segment" id="ref-for-ruby-segment-1">ruby segment</a>, each <a data-link-type="dfn" href="textlevel-semantics.html#ruby-bases" id="ref-for-ruby-bases-2">ruby base</a> in the <a data-link-type="dfn" href="textlevel-semantics.html#ruby-base-container" id="ref-for-ruby-base-container-1">ruby base container</a> is paired with one <a data-link-type="dfn" href="textlevel-semantics.html#ruby-text-annotations" id="ref-for-ruby-text-annotations-3">ruby text annotation</a> from the <a data-link-type="dfn" href="textlevel-semantics.html#ruby-text-container" id="ref-for-ruby-text-container-4">ruby text container</a>, in order. If there are not enough <a data-link-type="dfn" href="textlevel-semantics.html#ruby-text-annotations" id="ref-for-ruby-text-annotations-4">ruby text annotations</a> in a <a data-link-type="dfn" href="textlevel-semantics.html#ruby-annotation-container" id="ref-for-ruby-annotation-container-1">ruby annotation container</a>, the last one is associated with any excess <a data-link-type="dfn" href="textlevel-semantics.html#ruby-bases" id="ref-for-ruby-bases-3">ruby bases</a>.
    (If there are not any in the <a data-link-type="dfn" href="textlevel-semantics.html#ruby-annotation-container" id="ref-for-ruby-annotation-container-2">ruby annotation container</a>, an anonymous empty one is assumed
    to exist.) If there are not enough <a data-link-type="dfn" href="textlevel-semantics.html#ruby-bases" id="ref-for-ruby-bases-4">ruby bases</a>, any remaining <a data-link-type="dfn" href="textlevel-semantics.html#ruby-text-annotations" id="ref-for-ruby-text-annotations-5">ruby text annotations</a> are assumed to be associated with empty, anonymous bases inserted at the end of the <a data-link-type="dfn" href="textlevel-semantics.html#ruby-base-container" id="ref-for-ruby-base-container-2">ruby base container</a>.</p>
      <p>Note that the terms <a data-link-type="dfn" href="textlevel-semantics.html#ruby-segment" id="ref-for-ruby-segment-2">ruby segment</a>, <a data-link-type="dfn" href="textlevel-semantics.html#ruby-bases" id="ref-for-ruby-bases-5">ruby base</a>, <a data-link-type="dfn" href="textlevel-semantics.html#ruby-text-annotations" id="ref-for-ruby-text-annotations-6">ruby text annotation</a>, <a data-link-type="dfn" href="textlevel-semantics.html#ruby-text-container" id="ref-for-ruby-text-container-5">ruby text container</a>, <a data-link-type="dfn" href="textlevel-semantics.html#ruby-base-container" id="ref-for-ruby-base-container-3">ruby base container</a>, and <a data-link-type="dfn" href="textlevel-semantics.html#ruby-annotation-container" id="ref-for-ruby-annotation-container-3">ruby annotation container</a> have their equivalents in <cite>CSS Ruby Module Level 3</cite>. <a data-link-type="biblio" href="references.html#biblio-css3-ruby">[CSS3-RUBY]</a></p>
      <p>Informally, the segmentation and categorization algorithm below performs a simple set of
    tasks. First it processes adjacent <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rb" id="ref-for-elementdef-rb-6">rb</a></code> elements, text nodes, and non-ruby
    elements into a list of bases. Then it processes any number of <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-5">rtc</a></code> elements or
    sequences of <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-8">rt</a></code> elements that are considered to automatically map to an
    anonymous <a data-link-type="dfn" href="textlevel-semantics.html#ruby-text-container" id="ref-for-ruby-text-container-6">ruby text container</a>. Put together these data items form a <a data-link-type="dfn" href="textlevel-semantics.html#ruby-segment" id="ref-for-ruby-segment-3">ruby
    segment</a> as detailed in the data model above. It will continue to produce such segments
    until it reaches the end of the content of a given <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-12">ruby</a></code> element. The complexity
    of the algorithm below compared to this informal description stems from the need to support
    an author-friendly syntax and being mindful of inter-element white space.</p>
      <p>At any particular time, the <dfn data-dfn-type="dfn" data-lt="segmentation and categorization of content of a ruby" data-noexport="" id="segmentation-and-categorization-of-content-of-a-ruby">segmentation and categorization of content of a <code>ruby</code><a class="self-link" href="textlevel-semantics.html#segmentation-and-categorization-of-content-of-a-ruby"></a></dfn> element is the result that would be obtained from running the following
    algorithm:</p>
      <p></p>
      <ol>
       <li> Let <var>root</var> be the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-13">ruby</a></code> element for which the algorithm is
        being run. 
       </li><li>Let <var>index</var> be 0.
       </li><li>Let <var>ruby segments</var> be an empty list.
       </li><li>Let <var>current bases</var> be an empty list of DOM ranges.
       </li><li>Let <var>current bases range</var> be null.
       </li><li>Let <var>current bases range start</var> be null.
       </li><li>Let <var>current annotations</var> be an empty list of DOM ranges.
       </li><li>Let <var>current annotations range</var> be null.
       </li><li>Let <var>current annotations range start</var> be null.
       </li><li>Let <var>current annotation containers</var> be an empty list.
       </li><li>Let <var>current automatic base nodes</var> be an empty list of DOM Nodes.
       </li><li>Let <var>current automatic base range start</var> be null.
       </li><li> <i>Process a ruby child</i>: If <var>index</var> is equal to or greater than the number of
        child nodes in <var>root</var>, then run the steps to <a data-link-type="dfn" href="textlevel-semantics.html#commit-a-ruby-segment" id="ref-for-commit-a-ruby-segment-1">commit a ruby segment</a>,
        return <var>ruby segments</var>, and abort these steps. 
       </li><li> Let <var>current child</var> be the <var>index</var>th node in <var>root</var>. 
       </li><li> If <var>current child</var> is not a <a data-link-type="dfn" href="dom.html#text" id="ref-for-text-10">Text</a> node and is not an <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#interface-element">Element</a></code> node, then increment <var>index</var> by one and jump to the step
        labelled <i>process a ruby child</i>. 
       </li><li> If <var>current child</var> is an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-4">rp</a></code> element, then increment <var>index</var> by one and jump to the step labelled <i>process a ruby child</i>. (Note
        that this has the effect of including this element in any range that we are currently
        processing. This is done intentionally so that misplaced <code>rp</code> can be
        processed correctly; semantically they are ignored all the same.) 
       </li><li>
         If <var>current child</var> is an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-9">rt</a></code> element, then run these substeps: 
        <ol>
         <li>Run the steps to <a data-link-type="dfn" href="textlevel-semantics.html#commit-an-automatic-base" id="ref-for-commit-an-automatic-base-1">commit an automatic base</a>.
         </li><li>Run the steps to <a data-link-type="dfn" href="textlevel-semantics.html#commit-the-base-range" id="ref-for-commit-the-base-range-1">commit the base range</a>.
         </li><li> If <var>current annotations</var> is empty, set <var>current annotations range
            start</var> to the value of <var>index</var>. 
         </li><li> Create a new DOM range whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-start">start</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary point</a> (<var>root</var>, <var>index</var>) and whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-end">end</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary point</a> (<var>root</var>, <var>index</var> plus
            one), and append it at the end of <var>current annotations</var>. 
         </li><li> Increment <var>index</var> by one and jump to the step labelled <i>process a ruby
            child</i>. 
        </li></ol>
       </li><li>
         If <var>current child</var> is an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-6">rtc</a></code> element, then run these
        substeps: 
        <ol>
         <li>Run the steps to <a data-link-type="dfn" href="textlevel-semantics.html#commit-an-automatic-base" id="ref-for-commit-an-automatic-base-2">commit an automatic base</a>.
         </li><li>Run the steps to <a data-link-type="dfn" href="textlevel-semantics.html#commit-the-base-range" id="ref-for-commit-the-base-range-2">commit the base range</a>.
         </li><li>Run the steps to <a data-link-type="dfn" href="textlevel-semantics.html#commit-current-annotations" id="ref-for-commit-current-annotations-1">commit current annotations</a>.
         </li><li> Create a new <a data-link-type="dfn" href="textlevel-semantics.html#ruby-annotation-container" id="ref-for-ruby-annotation-container-4">ruby annotation container</a>. It is described by the list of
            annotations returned by running the steps to <a data-link-type="dfn" href="textlevel-semantics.html#process-an-rtc-element" id="ref-for-process-an-rtc-element-1">process an <code>rtc</code> element</a> and a DOM range whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-start">start</a> is
            the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary point</a> (<var>root</var>, <var>index</var>) and whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-end">end</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary point</a> (<var>root</var>, <var>index</var> plus
            one). Append this new <a data-link-type="dfn" href="textlevel-semantics.html#ruby-annotation-container" id="ref-for-ruby-annotation-container-5">ruby annotation container</a> at the end of <var>current
            annotation containers</var>. 
         </li><li> Increment <var>index</var> by one and jump to the step labelled <i>process a ruby
            child</i>. 
        </li></ol>
       </li><li>
         If <var>current child</var> is a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#text">Text</a></code> node and is <a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-12">inter-element
        whitespace</a>, then run these substeps: 
        <ol>
         <li> If <var>current annotations</var> is not empty, increment <var>index</var> by one and
            jump to the step labelled <i>process a ruby child</i>. 
         </li><li>
           Run the following substeps: 
          <ol>
           <li>Let <var>lookahead index</var> be set to the value of <var>index</var>.
           </li><li><i>Peek ahead</i>: Increment <var>lookahead index</var> by one.
           </li><li> If <var>lookahead index</var> is equal to or greater than the number of
                child nodes in <var>root</var>, then abort these substeps. 
           </li><li> Let <var>peek child</var> be the <var>lookahead index</var>th node in <var>root</var>. 
           </li><li> If <var>peek child</var> is a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#text">Text</a></code> node and is <a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-13">inter-element
                whitespace</a>, then jump to the step labelled <i>peek ahead</i>. 
           </li><li> If <var>peek child</var> is an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-10">rt</a></code> element, an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-7">rtc</a></code> element, or an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-5">rp</a></code> element, then set <var>index</var> to the value of <var>lookahead index</var> and jump to the step
                labelled <i>process a ruby child</i>. 
          </li></ol>
        </li></ol>
       </li><li> If <var>current annotations</var> is not empty or if <var>current annotation
        containers</var> is not empty, then run the steps to <a data-link-type="dfn" href="textlevel-semantics.html#commit-a-ruby-segment" id="ref-for-commit-a-ruby-segment-2">commit a ruby segment</a>. 
       </li><li>
         If <var>current child</var> is an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rb" id="ref-for-elementdef-rb-7">rb</a></code> element, then run these substeps: 
        <ol>
         <li>Run the steps to <a data-link-type="dfn" href="textlevel-semantics.html#commit-an-automatic-base" id="ref-for-commit-an-automatic-base-3">commit an automatic base</a>.
         </li><li> If <var>current bases</var> is empty, then set <var>current bases range start</var> to
            the value of <var>index</var>. 
         </li><li> Create a new DOM range whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-start">start</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary point</a> (<var>root</var>, <var>index</var>) and whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-end">end</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary point</a> (<var>root</var>, <var>index</var> plus
            one), and append it at the end of <var>current bases</var>. 
         </li><li> Increment <var>index</var> by one and jump to the step labelled <i>process a ruby
            child</i>. 
        </li></ol>
       </li><li> If <var>current automatic base nodes</var> is empty, set <var>current automatic base range
        start</var> to the value of <var>index</var>. 
       </li><li> Append <var>current child</var> at the end of <var>current automatic base nodes</var>. 
       </li><li> Increment <var>index</var> by one and jump to the step labelled <i>process a ruby
        child</i>. 
      </li></ol>
      <p>When the steps above say to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="commit-a-ruby-segment">commit a ruby segment</dfn>, it means to run the
      following steps at that point in the algorithm:</p>
      <ol>
       <li>Run the steps to <a data-link-type="dfn" href="textlevel-semantics.html#commit-an-automatic-base" id="ref-for-commit-an-automatic-base-4">commit an automatic base</a>.
       </li><li> If <var>current bases</var>, <var>current annotations</var>, and <var>current annotation
        containers</var> are all empty, abort these steps. 
       </li><li>Run the steps to <a data-link-type="dfn" href="textlevel-semantics.html#commit-the-base-range" id="ref-for-commit-the-base-range-3">commit the base range</a>.
       </li><li>Run the steps to <a data-link-type="dfn" href="textlevel-semantics.html#commit-current-annotations" id="ref-for-commit-current-annotations-2">commit current annotations</a>.
       </li><li> Create a new <a data-link-type="dfn" href="textlevel-semantics.html#ruby-segment" id="ref-for-ruby-segment-4">ruby segment</a>. It is described by a list of bases set to <var>current bases</var>, a base DOM range set to <var>current bases range</var>, and a
        list of <a data-link-type="dfn" href="textlevel-semantics.html#ruby-annotation-container" id="ref-for-ruby-annotation-container-6">ruby annotation containers</a> that are the <var>current annotation containers</var> list. Append this new <a data-link-type="dfn" href="textlevel-semantics.html#ruby-segment" id="ref-for-ruby-segment-5">ruby segment</a> at the end of <var>ruby segments</var>. 
       </li><li>Let <var>current bases</var> be an empty list.
       </li><li>Let <var>current bases range</var> be null.
       </li><li>Let <var>current bases range start</var> be null.
       </li><li>Let <var>current annotation containers</var> be an empty list.
      </li></ol>
      <p>When the steps above say to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="commit-the-base-range">commit the base range</dfn>, it means to run the following
      steps at that point in the algorithm:</p>
      <ol>
       <li>If <var>current bases</var> is empty, abort these steps.
       </li><li>If <var>current bases range</var> is not null, abort these steps.
       </li><li> Let <var>current bases range</var> be a DOM range whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-start">start</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary
        point</a> (<var>root</var>, <var>current bases range start</var>) and whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-end">end</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary
        point</a> (<var>root</var>, <var>index</var>). 
      </li></ol>
      <p>When the steps above say to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="commit-current-annotations">commit current annotations</dfn>, it means to run the
      following steps at that point in the algorithm:</p>
      <ol>
       <li> If <var>current annotations</var> is not empty and <var>current annotations range</var> is
        null let <var>current annotations range</var> be a DOM range whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-start">start</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary
        point</a> (<var>root</var>, <var>current annotations range start</var>) and whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-end">end</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary
        point</a> (<var>root</var>, <var>index</var>). 
       </li><li> If <var>current annotations</var> is not empty, create a new <a data-link-type="dfn" href="textlevel-semantics.html#ruby-annotation-container" id="ref-for-ruby-annotation-container-7">ruby annotation
        container</a>. It is described by an annotations list set to <var>current
        annotations</var> and a range set to <var>current annotations range</var>. Append this new <a data-link-type="dfn" href="textlevel-semantics.html#ruby-annotation-container" id="ref-for-ruby-annotation-container-8">ruby annotation container</a> at the end of <var>current annotation
        containers</var>. 
       </li><li>Let <var>current annotations</var> be an empty list of DOM ranges.
       </li><li>Let <var>current annotations range</var> be null.
       </li><li>Let <var>current annotations range start</var> be null.
      </li></ol>
      <p>When the steps above say to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="commit-an-automatic-base">commit an automatic base</dfn>, it means to run the
      following steps at that point in the algorithm:</p>
      <ol>
       <li> If <var>current automatic base nodes</var> is empty, abort these steps. 
       </li><li>
         If <var>current automatic base nodes</var> contains nodes that are not <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#text">Text</a></code> nodes, or <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#text">Text</a></code> nodes that are not <a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-14">inter-element whitespace</a>, then
        run these substeps: 
        <ol>
         <li> It <var>current bases</var> is empty, set <var>current bases range start</var> to the
            value of <var>current automatic base range start</var>. 
         </li><li> Create a new DOM range whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-start">start</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary point</a> (<var>root</var>, <var>current
            automatic base range start</var>) and whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-end">end</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary point</a> (<var>root</var>, <var>index</var>), and append it at the end of <var>current bases</var>. 
        </li></ol>
       </li><li>Let <var>current automatic base nodes</var> be an empty list of DOM Nodes.
       </li><li>Let <var>current automatic base range start</var> be null.
      </li></ol>
     </div>
     <h4 class="heading settled" data-level="4.5.11" id="the-rb-element"><span class="secno">4.5.11. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-rb"><code>rb</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-rb-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-42">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-41">Contexts in which this element can be used</a>:
      </dt><dd>As a child of a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-14">ruby</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-44">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-51">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-41">Tag omission in text/html</a>:
      </dt><dd> An <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rb" id="ref-for-elementdef-rb-8">rb</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-14">end tag</a> may be omitted if the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rb" id="ref-for-elementdef-rb-9">rb</a></code> element is
      immediately followed by an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rb" id="ref-for-elementdef-rb-10">rb</a></code>, <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-11">rt</a></code>, <code>rtc</code> or <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-6">rp</a></code> element, or if there is no more content in the parent element. 
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-42">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-41">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-43">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-41">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-45">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rb" id="ref-for-elementdef-rb-11">rb</a></code> element marks the base text component of a ruby annotation. When it is
    the child of a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-15">ruby</a></code> element, it doesn’t <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-46">represent</a> anything itself, but its parent <code>ruby</code> element uses it as part of determining what <em>it</em> <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-47">represents</a>.</p>
     <div class="impl"> An <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rb" id="ref-for-elementdef-rb-12">rb</a></code> element that is not a child of a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-16">ruby</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-48">represents</a> the same thing as its children. </div>
     <h4 class="heading settled" data-level="4.5.12" id="the-rt-element"><span class="secno">4.5.12. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-rt"><code>rt</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-rt-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-43">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-42">Contexts in which this element can be used</a>:
      </dt><dd>As a child of a <code>ruby</code> or of an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-8">rtc</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-45">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-52">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-42">Tag omission in text/html</a>:
      </dt><dd> An <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-12">rt</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-15">end tag</a> may be omitted if the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-13">rt</a></code> element is
      immediately followed by an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rb" id="ref-for-elementdef-rb-13">rb</a></code>, <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-14">rt</a></code>, <code>rtc</code> or <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-7">rp</a></code> element, or if there is no more content in the parent element. 
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-43">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-42">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-44">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-42">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-46">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-15">rt</a></code> element marks the ruby text component of a ruby annotation. When it is
  the child of a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-17">ruby</a></code> element or of an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-9">rtc</a></code> element that is itself
  the child of a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-18">ruby</a></code> element, it doesn’t <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-49">represent</a> anything itself, but its ancestor <code>ruby</code> element uses it as part of determining what <em>it</em> <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-50">represents</a>.</p>
     <div class="impl"> An <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-16">rt</a></code> element that is not a child of a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-19">ruby</a></code> element or of an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-10">rtc</a></code> element that is itself the child of a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-20">ruby</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-51">represents</a> the same thing as its children. </div>
     <h4 class="heading settled" data-level="4.5.13" id="the-rtc-element"><span class="secno">4.5.13. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-rtc"><code>rtc</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-rtc-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-44">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-43">Contexts in which this element can be used</a>:
      </dt><dd>As a child of a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-21">ruby</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-46">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-53">Phrasing content</a>, <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-17">rt</a></code>, or <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-8">rp</a></code> elements.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-43">Tag omission in text/html</a>:
      </dt><dd> An <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-11">rtc</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-16">end tag</a> may be omitted if the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-12">rtc</a></code> element is
      immediately followed by an <code>rb</code> or <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-13">rtc</a></code> element, or if there is no more
      content in the parent element. 
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-44">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-43">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-45">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-43">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-47">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-14">rtc</a></code> element marks a <a data-link-type="dfn" href="textlevel-semantics.html#ruby-text-container" id="ref-for-ruby-text-container-7">ruby text container</a> for ruby text components
  in a ruby annotation. When it is the child of a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-22">ruby</a></code> element it doesn’t <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-52">represent</a> anything itself, but its parent <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-23">ruby</a></code> element
  uses it as part of determining what <em>it</em> <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-53">represents</a>.</p>
     <div class="impl">
      <p>An <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-15">rtc</a></code> element that is not a child of a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-24">ruby</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-54">represents</a> the same thing as its children.</p>
      <p>When an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-16">rtc</a></code> element is processed as part of the segmentation and
      categorization of content for a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-25">ruby</a></code> element, the following algorithm
      defines how to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="process-an-rtc-element">process an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-17">rtc</a></code> element</dfn>:</p>
      <ol>
       <li> Let <var>root</var> be the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-18">rtc</a></code> element for which the algorithm is
        being run. 
       </li><li>Let <var>index</var> be 0.
       </li><li>Let <var>annotations</var> be an empty list of DOM ranges.
       </li><li>Let <var>current automatic annotation nodes</var> be an empty list of DOM nodes.
       </li><li>Let <var>current automatic annotation range start</var> be null.
       </li><li> <i>Process an rtc child</i>: If <var>index</var> is equal to or greater than the number of
        child nodes in <var>root</var>, then run the steps to <a data-link-type="dfn" href="textlevel-semantics.html#commit-an-automatic-annotation" id="ref-for-commit-an-automatic-annotation-1">commit an automatic
        annotation</a>, return <var>annotations</var>, and abort these steps. 
       </li><li> Let <var>current child</var> be the <var>index</var>th node in <var>root</var>. 
       </li><li>
         If <var>current child</var> is an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-18">rt</a></code> element, then run these substeps: 
        <ol>
         <li>Run the steps to <a data-link-type="dfn" href="textlevel-semantics.html#commit-an-automatic-annotation" id="ref-for-commit-an-automatic-annotation-2">commit an automatic annotation</a>.
         </li><li> Create a new DOM range whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-start">start</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary point</a> (<var>root</var>, <var>index</var>) and whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-end">end</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary point</a> (<var>root</var>, <var>index</var> plus
            one), and append it at the end of <var>annotations</var>. 
         </li><li> Increment <var>index</var> by one and jump to the step labelled <i>process an rtc
            child</i>. 
        </li></ol>
       </li><li> If <var>current automatic annotation nodes</var> is empty, set <var>current automatic
        annotation range start</var> to the value of <var>index</var>. 
       </li><li> Append <var>current child</var> at the end of <var>current automatic annotation
        nodes</var>. 
       </li><li> Increment <var>index</var> by one and jump to the step labelled <i>process an rtc
        child</i>. 
      </li></ol>
      <p>When the steps above say to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="commit-an-automatic-annotation">commit an automatic annotation</dfn>, it means to run the
      following steps at that point in the algorithm:</p>
      <ol>
       <li> If <var>current automatic annotation nodes</var> is empty, abort these steps. 
       </li><li> If <var>current automatic annotation nodes</var> contains nodes that are not <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#text">Text</a></code> nodes, or <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#text">Text</a></code> nodes that are not <a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-15">inter-element
        whitespace</a>, then create a new DOM range whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-start">start</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary
        point</a> (<var>root</var>, <var>current automatic annotation range start</var>) and
        whose <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-end">end</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-range-bp">boundary point</a> (<var>root</var>, <var>index</var>), and
        append it at the end of <var>annotations</var>. 
       </li><li>Let <var>current automatic annotation nodes</var> be an empty list of DOM nodes.
       </li><li>Let <var>current automatic annotation range start</var> be null.
      </li></ol>
     </div>
     <h4 class="heading settled" data-level="4.5.14" id="the-rp-element"><span class="secno">4.5.14. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-rp"><code>rp</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-rp-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-45">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-44">Contexts in which this element can be used</a>:
      </dt><dd> As a child of a <code>ruby</code> or <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-19">rtc</a></code> element, either immediately before or
      immediately after an <code>rt</code> or <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rtc" id="ref-for-elementdef-rtc-20">rtc</a></code> element, but not between <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-19">rt</a></code> elements. 
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-47">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-54">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-44">Tag omission in text/html</a>:
      </dt><dd>An <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-9">rp</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-17">end tag</a> may be omitted
    if the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-10">rp</a></code> element is immediately followed by an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rb" id="ref-for-elementdef-rb-14">rb</a></code>, <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-20">rt</a></code>, <code>rtc</code> or <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-11">rp</a></code> element, or if there is no more content in the parent
    element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-45">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-44">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-46">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-44">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-48">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-12">rp</a></code> element is used to provide fallback text to be shown by user agents that
    don’t support ruby annotations. One widespread convention is to provide parentheses around
    the ruby text component of a ruby annotation.</p>
     <p>The contents of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-13">rp</a></code> elements are typically not displayed by user agents
    which do support ruby annotations</p>
     <p>An <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-14">rp</a></code> element <span class="impl">that is a child of a <code>ruby</code> element</span> <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-55">represents</a> nothing. <span class="impl">An <code>rp</code> element whose parent element is not a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-26">ruby</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-56">represents</a> its
    children.</span></p>
     <p>The example shown previously, in which each ideograph in the text <span lang="ja">漢字</span> is annotated with its phonetic reading, could be expanded
    to use <code>rp</code> so that in legacy user agents the readings are in parentheses (please
    note that white space has been introduced into this example in order to make it more
    readable):</p>
     <div class="example" id="example-6b226bda">
      <a class="self-link" href="textlevel-semantics.html#example-6b226bda"></a>
<pre lang="ja">...
&lt;ruby&gt;
  漢
  &lt;rb&gt;字&lt;/rb&gt;
  &lt;rp&gt; (&lt;/rp&gt;
  &lt;rt&gt;かん&lt;/rt&gt;
  &lt;rt&gt;じ&lt;/rt&gt;
  &lt;rp&gt;) &lt;/rp&gt;
&lt;/ruby&gt;
...
  </pre>
     </div>
     <p>In conforming user agents the rendering would be as above, but in user agents that do not
    support ruby, the rendering would be:</p>
     <div class="example" id="example-a06143a1">
      <a class="self-link" href="textlevel-semantics.html#example-a06143a1"></a>
<pre lang="ja">... 漢字 (かんじ) ...</pre>
     </div>
     <p>When there are multiple annotations for a segment, <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-15">rp</a></code> elements can also be
    placed between the annotations. Here is another copy of an earlier contrived example showing
    some symbols with names given in English and French using double-sided annotations, but this
    time with <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-16">rp</a></code> elements as well:</p>
     <div class="example" id="example-d06347bc">
      <a class="self-link" href="textlevel-semantics.html#example-d06347bc"></a> 
<pre class="highlight"><span class="nt">&lt;ruby&gt;</span>
  ♥<span class="nt">&lt;rp&gt;</span>: <span class="nt">&lt;/rp&gt;&lt;rt&gt;</span>Heart<span class="nt">&lt;/rt&gt;&lt;rp&gt;</span>, <span class="nt">&lt;/rp&gt;&lt;rtc&gt;&lt;rt</span> <span class="na">lang=</span><span class="s">fr</span><span class="nt">&gt;</span>Cœur<span class="nt">&lt;/rt&gt;&lt;/rtc&gt;&lt;rp&gt;</span>.<span class="nt">&lt;/rp&gt;</span>
  ☘<span class="nt">&lt;rp&gt;</span>: <span class="nt">&lt;/rp&gt;&lt;rt&gt;</span>Shamrock<span class="nt">&lt;/rt&gt;&lt;rp&gt;</span>, <span class="nt">&lt;/rp&gt;&lt;rtc&gt;&lt;rt</span> <span class="na">lang=</span><span class="s">fr</span><span class="nt">&gt;</span>Trèfle<span class="nt">&lt;/rt&gt;&lt;/rtc&gt;&lt;rp&gt;</span>.<span class="nt">&lt;/rp&gt;</span>
  ✶<span class="nt">&lt;rp&gt;</span>: <span class="nt">&lt;/rp&gt;&lt;rt&gt;</span>Star<span class="nt">&lt;/rt&gt;&lt;rp&gt;</span>, <span class="nt">&lt;/rp&gt;&lt;rtc&gt;&lt;rt</span> <span class="na">lang=</span><span class="s">fr</span><span class="nt">&gt;</span>Étoile<span class="nt">&lt;/rt&gt;&lt;/rtc&gt;&lt;rp&gt;</span>.<span class="nt">&lt;/rp&gt;</span>
<span class="nt">&lt;/ruby&gt;</span>
</pre>
     </div>
     <p>This would make the example render as follows in non-ruby-capable user agents:</p>
     <div class="example" id="example-609ec137">
      <a class="self-link" href="textlevel-semantics.html#example-609ec137"></a> 
<pre class="highlight">♥: Heart, <span lang="fr">Cœur</span>.
☘: Shamrock, <span lang="fr">Trèfle</span>.
✶: Star, <span lang="fr">Étoile</span>.
</pre>
     </div>
     <h4 class="heading settled" data-level="4.5.15" id="the-data-element"><span class="secno">4.5.15. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-data"><code>data</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-data-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-46">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-72">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-55">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-29">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-45">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-56">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-48">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-57">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-45">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-46">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-45">Global attributes</a>
      </dd><dd><code>value</code> - Machine-readable value 
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-47">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-45">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLDataElement" data-dfn-type="interface" data-export="" id="htmldataelement-htmldataelement">HTMLDataElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-49">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="textlevel-semantics.html#dom-htmldataelement-value" id="ref-for-dom-htmldataelement-value-1">value</a>;
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-data" id="ref-for-elementdef-data-4">data</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-57">represents</a> its contents, along with a
  machine-readable form of those contents in the <code>value</code> attribute.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="data" data-dfn-type="element-attr" data-export="" id="element-attrdef-data-value"><code>value</code></dfn> attribute must be present. Its value
  must be a representation of the element’s contents in a machine-readable format.</p>
     <p class="note" role="note"> When the value is date- or time-related, the more specific <code>time</code> element can be used instead. </p>
     <p>The element can be used for several purposes.</p>
     <p>When combined with microformats or microdata,
  the element serves to provide both a machine-readable value for the purposes
  of data processors, and a human-readable value for the purposes of rendering in a Web browser. In
  this case, the format to be used in the <code>value</code> attribute is
  determined by the microformats or microdata vocabulary in use.</p>
     <p>The element can also, however, be used in conjunction with scripts in the page, for when a
  script has a literal value to store alongside a human-readable value. In such cases, the format to
  be used depends only on the needs of the script. (The <code>data-*</code> attributes can also be useful in such situations.)</p>
     <div class="impl">
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLDataElement" data-dfn-type="attribute" data-export="" id="dom-htmldataelement-value"><code>value</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-20">reflect</a> the content attribute of the same name.</p>
     </div>
     <h4 class="heading settled" data-level="4.5.16" id="the-time-element"><span class="secno">4.5.16. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-time"><code>time</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-time-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-47">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-73">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-58">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-30">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-46">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-59">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-49">Content model</a>:
      </dt><dd>If the element has a <code>datetime</code> attribute: <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-60">Phrasing content</a>.
      </dd><dd>Otherwise: <a data-link-type="dfn" href="dom.html#text" id="ref-for-text-11">Text</a> , but must match requirements described in prose below.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-46">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-47">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-46">Global attributes</a>
      </dd><dd><code>datetime</code> - Machine-readable value
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-48">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-46">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLTimeElement" data-dfn-type="interface" data-export="" id="htmltimeelement-htmltimeelement">HTMLTimeElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-50">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="textlevel-semantics.html#dom-htmltimeelement-datetime" id="ref-for-dom-htmltimeelement-datetime-1">dateTime</a>;
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-5">time</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-58">represents</a> its contents, along with a
  machine-readable form of those contents in the <code>datetime</code> attribute. The kind of content is limited to various kinds of dates, times, time-zone offsets, and
  durations, as described below.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="time" data-dfn-type="element-attr" data-export="" id="element-attrdef-time-datetime"><code>datetime</code></dfn> attribute may be present. If
  present, its value must be a representation of the element’s contents in a machine-readable
  format.</p>
     <p>A <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-6">time</a></code> element that does not have a <code>datetime</code> content attribute must not have any element
  descendants.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="datetime-value">datetime value</dfn> of a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-7">time</a></code> element is the value of the element’s <code><a data-link-type="element-sub" href="textlevel-semantics.html#element-attrdef-time-datetime" id="ref-for-element-attrdef-time-datetime-1">datetime</a></code> content attribute, if it has one, otherwise the concatenation of the contents of
  all the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#text">Text</a></code> nodes that are children of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-8">time</a></code> element (ignoring any other
  nodes such as comments or elements), in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-27">tree order</a>.</p>
     <p>The <a data-link-type="dfn" href="textlevel-semantics.html#datetime-value" id="ref-for-datetime-value-1">datetime value</a> of a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-9">time</a></code> element must match one of the following
  syntaxes.</p>
     <dl>
      <dt>A <a data-link-type="dfn" href="infrastructure.html#valid-month-string" id="ref-for-valid-month-string-2">valid month string</a>
      </dt><dd>
<pre class="example" id="example-47d58294"><a class="self-link" href="textlevel-semantics.html#example-47d58294"></a>&lt;time&gt;2011-11&lt;/time&gt;</pre>
      </dd><dt>A <a data-link-type="dfn" href="infrastructure.html#valid-date-string" id="ref-for-valid-date-string-6">valid date string</a>
      </dt><dd>
<pre class="example" id="example-abd46b9a"><a class="self-link" href="textlevel-semantics.html#example-abd46b9a"></a>&lt;time&gt;2011-11-18&lt;/time&gt;</pre>
      </dd><dt>A <a data-link-type="dfn" href="infrastructure.html#valid-yearless-date-string" id="ref-for-valid-yearless-date-string-1">valid yearless date string</a>
      </dt><dd>
<pre class="example" id="example-bc7542bd"><a class="self-link" href="textlevel-semantics.html#example-bc7542bd"></a>&lt;time&gt;11-18&lt;/time&gt;</pre>
      </dd><dt>A <a data-link-type="dfn" href="infrastructure.html#valid-time-string" id="ref-for-valid-time-string-5">valid time string</a>
      </dt><dd>
<pre class="example" id="example-a78f26bc"><a class="self-link" href="textlevel-semantics.html#example-a78f26bc"></a>&lt;time&gt;14:54&lt;/time&gt;</pre>
<pre class="example" id="example-c40a5617"><a class="self-link" href="textlevel-semantics.html#example-c40a5617"></a>&lt;time&gt;14:54:39&lt;/time&gt;</pre>
<pre class="example" id="example-39f8c1ef"><a class="self-link" href="textlevel-semantics.html#example-39f8c1ef"></a>&lt;time&gt;14:54:39.929&lt;/time&gt;</pre>
      </dd><dt>A <a data-link-type="dfn" href="infrastructure.html#valid-floating-date-and-time-string" id="ref-for-valid-floating-date-and-time-string-1">valid floating date and time string</a>
      </dt><dd>
<pre class="example" id="example-7f765e5a"><a class="self-link" href="textlevel-semantics.html#example-7f765e5a"></a>&lt;time&gt;2011-11-18T14:54&lt;/time&gt;</pre>
<pre class="example" id="example-79e89352"><a class="self-link" href="textlevel-semantics.html#example-79e89352"></a>&lt;time&gt;2011-11-18T14:54:39&lt;/time&gt;</pre>
<pre class="example" id="example-c20de38a"><a class="self-link" href="textlevel-semantics.html#example-c20de38a"></a>&lt;time&gt;2011-11-18T14:54:39.929&lt;/time&gt;</pre>
<pre class="example" id="example-015cc1e8"><a class="self-link" href="textlevel-semantics.html#example-015cc1e8"></a>&lt;time&gt;2011-11-18 14:54&lt;/time&gt;</pre>
<pre class="example" id="example-8591d939"><a class="self-link" href="textlevel-semantics.html#example-8591d939"></a>&lt;time&gt;2011-11-18 14:54:39&lt;/time&gt;</pre>
<pre class="example" id="example-d5ed4763"><a class="self-link" href="textlevel-semantics.html#example-d5ed4763"></a>&lt;time&gt;2011-11-18 14:54:39.929&lt;/time&gt;</pre>
       <p class="note" role="note"> Times with dates but without a time zone offset are useful for specifying events
    that are observed at the same specific time in each time zone, throughout a day. For example,
    the 2020 new year is celebrated at 2020-01-01 00:00 in each time zone, not at the same precise
    moment across all time zones. For events that occur at the same time across all time zones, for
    example a videoconference meeting, a <a data-link-type="dfn" href="infrastructure.html#valid-global-date-and-time-string" id="ref-for-valid-global-date-and-time-string-3">valid global date and time string</a> is likely
    more useful. </p>
      </dd><dt>A <a data-link-type="dfn" href="infrastructure.html#valid-time-zone-offset-string" id="ref-for-valid-time-zone-offset-string-2">valid time-zone offset string</a>
      </dt><dd>
<pre class="example" id="example-b6d94749"><a class="self-link" href="textlevel-semantics.html#example-b6d94749"></a>&lt;time&gt;Z&lt;/time&gt;</pre>
<pre class="example" id="example-72f84b48"><a class="self-link" href="textlevel-semantics.html#example-72f84b48"></a>&lt;time&gt;+0000&lt;/time&gt;</pre>
<pre class="example" id="example-ef83f5e0"><a class="self-link" href="textlevel-semantics.html#example-ef83f5e0"></a>&lt;time&gt;+00:00&lt;/time&gt;</pre>
<pre class="example" id="example-7b48561e"><a class="self-link" href="textlevel-semantics.html#example-7b48561e"></a>&lt;time&gt;-0800&lt;/time&gt;</pre>
<pre class="example" id="example-7358e28a"><a class="self-link" href="textlevel-semantics.html#example-7358e28a"></a>&lt;time&gt;-08:00&lt;/time&gt;</pre>
       <p class="note" role="note"> For times without dates (or times referring to events that recur on multiple
    dates), specifying the geographic location that controls the time is usually more useful than
    specifying a time zone offset, because geographic locations change time zone offsets with
    daylight savings time. In some cases, geographic locations even change time zone, e.g., when the
    boundaries of those time zones are redrawn, as happened with Samoa at the end of 2011. There
    exists a time zone database that describes the boundaries of time zones and what rules apply
    within each such zone, known as the <i>time zone database</i>. <a data-link-type="biblio" href="references.html#biblio-tzdatabase">[TZDATABASE]</a> </p>
      </dd><dt>A <a data-link-type="dfn" href="infrastructure.html#valid-global-date-and-time-string" id="ref-for-valid-global-date-and-time-string-4">valid global date and time string</a>
      </dt><dd>
<pre class="example" id="example-c1b7b74e"><a class="self-link" href="textlevel-semantics.html#example-c1b7b74e"></a>&lt;time&gt;2011-11-18T14:54Z&lt;/time&gt;</pre>
<pre class="example" id="example-04d7625c"><a class="self-link" href="textlevel-semantics.html#example-04d7625c"></a>&lt;time&gt;2011-11-18T14:54:39Z&lt;/time&gt;</pre>
<pre class="example" id="example-6c984eec"><a class="self-link" href="textlevel-semantics.html#example-6c984eec"></a>&lt;time&gt;2011-11-18T14:54:39.929Z&lt;/time&gt;</pre>
<pre class="example" id="example-d3e86b38"><a class="self-link" href="textlevel-semantics.html#example-d3e86b38"></a>&lt;time&gt;2011-11-18T14:54+0000&lt;/time&gt;</pre>
<pre class="example" id="example-b675504a"><a class="self-link" href="textlevel-semantics.html#example-b675504a"></a>&lt;time&gt;2011-11-18T14:54:39+0000&lt;/time&gt;</pre>
<pre class="example" id="example-4c670a50"><a class="self-link" href="textlevel-semantics.html#example-4c670a50"></a>&lt;time&gt;2011-11-18T14:54:39.929+0000&lt;/time&gt;</pre>
<pre class="example" id="example-f236dbdc"><a class="self-link" href="textlevel-semantics.html#example-f236dbdc"></a>&lt;time&gt;2011-11-18T14:54+00:00&lt;/time&gt;</pre>
<pre class="example" id="example-efc70752"><a class="self-link" href="textlevel-semantics.html#example-efc70752"></a>&lt;time&gt;2011-11-18T14:54:39+00:00&lt;/time&gt;</pre>
<pre class="example" id="example-ee9d1fb4"><a class="self-link" href="textlevel-semantics.html#example-ee9d1fb4"></a>&lt;time&gt;2011-11-18T14:54:39.929+00:00&lt;/time&gt;</pre>
<pre class="example" id="example-aa2790c5"><a class="self-link" href="textlevel-semantics.html#example-aa2790c5"></a>&lt;time&gt;2011-11-18T06:54-0800&lt;/time&gt;</pre>
<pre class="example" id="example-d316aa36"><a class="self-link" href="textlevel-semantics.html#example-d316aa36"></a>&lt;time&gt;2011-11-18T06:54:39-0800&lt;/time&gt;</pre>
<pre class="example" id="example-90da9382"><a class="self-link" href="textlevel-semantics.html#example-90da9382"></a>&lt;time&gt;2011-11-18T06:54:39.929-0800&lt;/time&gt;</pre>
<pre class="example" id="example-5973bb0f"><a class="self-link" href="textlevel-semantics.html#example-5973bb0f"></a>&lt;time&gt;2011-11-18T06:54-08:00&lt;/time&gt;</pre>
<pre class="example" id="example-2e2c20cf"><a class="self-link" href="textlevel-semantics.html#example-2e2c20cf"></a>&lt;time&gt;2011-11-18T06:54:39-08:00&lt;/time&gt;</pre>
<pre class="example" id="example-f05ed3f8"><a class="self-link" href="textlevel-semantics.html#example-f05ed3f8"></a>&lt;time&gt;2011-11-18T06:54:39.929-08:00&lt;/time&gt;</pre>
<pre class="example" id="example-46308273"><a class="self-link" href="textlevel-semantics.html#example-46308273"></a>&lt;time&gt;2011-11-18 14:54Z&lt;/time&gt;</pre>
<pre class="example" id="example-e6f78fdb"><a class="self-link" href="textlevel-semantics.html#example-e6f78fdb"></a>&lt;time&gt;2011-11-18 14:54:39Z&lt;/time&gt;</pre>
<pre class="example" id="example-c60dfe03"><a class="self-link" href="textlevel-semantics.html#example-c60dfe03"></a>&lt;time&gt;2011-11-18 14:54:39.929Z&lt;/time&gt;</pre>
<pre class="example" id="example-0d27fe27"><a class="self-link" href="textlevel-semantics.html#example-0d27fe27"></a>&lt;time&gt;2011-11-18 14:54+0000&lt;/time&gt;</pre>
<pre class="example" id="example-b156301f"><a class="self-link" href="textlevel-semantics.html#example-b156301f"></a>&lt;time&gt;2011-11-18 14:54:39+0000&lt;/time&gt;</pre>
<pre class="example" id="example-4572cfdf"><a class="self-link" href="textlevel-semantics.html#example-4572cfdf"></a>&lt;time&gt;2011-11-18 14:54:39.929+0000&lt;/time&gt;</pre>
<pre class="example" id="example-b678096a"><a class="self-link" href="textlevel-semantics.html#example-b678096a"></a>&lt;time&gt;2011-11-18 14:54+00:00&lt;/time&gt;</pre>
<pre class="example" id="example-3c1e64b4"><a class="self-link" href="textlevel-semantics.html#example-3c1e64b4"></a>&lt;time&gt;2011-11-18 14:54:39+00:00&lt;/time&gt;</pre>
<pre class="example" id="example-c199c558"><a class="self-link" href="textlevel-semantics.html#example-c199c558"></a>&lt;time&gt;2011-11-18 14:54:39.929+00:00&lt;/time&gt;</pre>
<pre class="example" id="example-a8ed8e3f"><a class="self-link" href="textlevel-semantics.html#example-a8ed8e3f"></a>&lt;time&gt;2011-11-18 06:54-0800&lt;/time&gt;</pre>
<pre class="example" id="example-a6270f1f"><a class="self-link" href="textlevel-semantics.html#example-a6270f1f"></a>&lt;time&gt;2011-11-18 06:54:39-0800&lt;/time&gt;</pre>
<pre class="example" id="example-da502192"><a class="self-link" href="textlevel-semantics.html#example-da502192"></a>&lt;time&gt;2011-11-18 06:54:39.929-0800&lt;/time&gt;</pre>
<pre class="example" id="example-31b9e989"><a class="self-link" href="textlevel-semantics.html#example-31b9e989"></a>&lt;time&gt;2011-11-18 06:54-08:00&lt;/time&gt;</pre>
<pre class="example" id="example-4b22124d"><a class="self-link" href="textlevel-semantics.html#example-4b22124d"></a>&lt;time&gt;2011-11-18 06:54:39-08:00&lt;/time&gt;</pre>
<pre class="example" id="example-04b009b1"><a class="self-link" href="textlevel-semantics.html#example-04b009b1"></a>&lt;time&gt;2011-11-18 06:54:39.929-08:00&lt;/time&gt;</pre>
       <p class="note" role="note"> Times with dates and a time zone offset are useful for specifying specific
    events, or recurring virtual events where the time is not anchored to a specific geographic
    location. For example, the precise time of an asteroid impact, or a particular meeting in a
    series of meetings held at 1400 UTC every day, regardless of whether any particular part of the
    world is observing daylight savings time or not. For events where the precise time varies by the
    local time zone offset of a specific geographic location, a <a data-link-type="dfn" href="infrastructure.html#valid-floating-date-and-time-string" id="ref-for-valid-floating-date-and-time-string-2">valid floating date and time
    string</a> combined with that geographic location is likely more useful. </p>
      </dd><dt>A <a data-link-type="dfn" href="infrastructure.html#valid-week-string" id="ref-for-valid-week-string-1">valid week string</a>
      </dt><dd>
<pre class="example" id="example-c2134a2a"><a class="self-link" href="textlevel-semantics.html#example-c2134a2a"></a>&lt;time&gt;2011-W47&lt;/time&gt;</pre>
      </dd><dt>Four or more <a data-link-type="dfn" href="infrastructure.html#ascii-digits" id="ref-for-ascii-digits-67">ASCII digits</a>, at least one of which is not U+0030 DIGIT ZERO (0)
      </dt><dd>
<pre class="example" id="example-73cc221a"><a class="self-link" href="textlevel-semantics.html#example-73cc221a"></a>&lt;time&gt;2011&lt;/time&gt;</pre>
<pre class="example" id="example-e5aeb4d5"><a class="self-link" href="textlevel-semantics.html#example-e5aeb4d5"></a>&lt;time&gt;0001&lt;/time&gt;</pre>
      </dd><dt>A <a data-link-type="dfn" href="infrastructure.html#valid-duration-string" id="ref-for-valid-duration-string-1">valid duration string</a>
      </dt><dd>
<pre class="example" id="example-4d43dd8f"><a class="self-link" href="textlevel-semantics.html#example-4d43dd8f"></a>&lt;time&gt;PT4H18M3S&lt;/time&gt;</pre>
<pre class="example" id="example-14c83bfb"><a class="self-link" href="textlevel-semantics.html#example-14c83bfb"></a>&lt;time&gt;4h 18m 3s&lt;/time&gt;</pre>
     </dd></dl>
     <p class="note" role="note"> Many of the preceding valid syntaxes describe "floating" date and/or time values
  (they do not include a <a data-link-type="dfn" href="infrastructure.html#time-zone" id="ref-for-time-zone-1">time-zone offset</a>). Care is needed when
  converting floating time values to or from global ("incremental") time values (e.g., JavaScript’s
  Date object). In many cases, an implicit time-of-day and time zone are used in the conversion and
  may result in unexpected changes to the value of the date itself. <a data-link-type="biblio" href="references.html#biblio-timezone">[TIMEZONE]</a> </p>
     <div class="impl">
      <p>The <dfn data-dfn-type="dfn" data-noexport="" id="machine-readable-equivalent-of-the-elements-contents">machine-readable equivalent of the element’s contents<a class="self-link" href="textlevel-semantics.html#machine-readable-equivalent-of-the-elements-contents"></a></dfn> must be obtained from the
  element’s <a data-link-type="dfn" href="textlevel-semantics.html#datetime-value" id="ref-for-datetime-value-2">datetime value</a> by using the following algorithm:</p>
      <ol>
       <li>If <a data-link-type="dfn" href="infrastructure.html#parsing-a-month-string" id="ref-for-parsing-a-month-string-1">parsing a month string</a> from the element’s <a data-link-type="dfn" href="textlevel-semantics.html#datetime-value" id="ref-for-datetime-value-3">datetime value</a> returns a <a data-link-type="dfn" href="infrastructure.html#month" id="ref-for-month-1">month</a>, that is the
    machine-readable equivalent; abort these steps.
       </li><li>If <a data-link-type="dfn" href="infrastructure.html#parsing-a-date-string" id="ref-for-parsing-a-date-string-1">parsing a date string</a> from the element’s <a data-link-type="dfn" href="textlevel-semantics.html#datetime-value" id="ref-for-datetime-value-4">datetime value</a> returns a <a data-link-type="dfn" href="infrastructure.html#dates-date" id="ref-for-dates-date-2">date</a>, that is the
    machine-readable equivalent; abort these steps.
       </li><li>If <a data-link-type="dfn" href="infrastructure.html#parsing-a-yearless-date-string" id="ref-for-parsing-a-yearless-date-string-1">parsing a yearless date string</a> from
    the element’s <a data-link-type="dfn" href="textlevel-semantics.html#datetime-value" id="ref-for-datetime-value-5">datetime value</a> returns a <a data-link-type="dfn" href="infrastructure.html#yearless-date" id="ref-for-yearless-date-1">yearless
    date</a>, that is the machine-readable equivalent; abort these steps.
       </li><li>If <a data-link-type="dfn" href="infrastructure.html#parsing-a-time-string" id="ref-for-parsing-a-time-string-1">parsing a time string</a> from the element’s <a data-link-type="dfn" href="textlevel-semantics.html#datetime-value" id="ref-for-datetime-value-6">datetime value</a> returns a <a data-link-type="dfn" href="infrastructure.html#time" id="ref-for-time-2">time</a>, that is the
    machine-readable equivalent; abort these steps.
       </li><li>If <a data-link-type="dfn" href="infrastructure.html#parsing-a-floating-date-and-time-string" id="ref-for-parsing-a-floating-date-and-time-string-1">parsing a floating date and time string</a> from the element’s <a data-link-type="dfn" href="textlevel-semantics.html#datetime-value" id="ref-for-datetime-value-7">datetime value</a> returns a <a data-link-type="dfn" href="infrastructure.html#floating-date-and-time" id="ref-for-floating-date-and-time-1">floating date and time</a>, that is the machine-readable
    equivalent; abort these steps.
       </li><li>If <a data-link-type="dfn" href="infrastructure.html#parsing-a-time-zone-offset-string" id="ref-for-parsing-a-time-zone-offset-string-1">parsing a time-zone offset string</a> from the element’s <a data-link-type="dfn" href="textlevel-semantics.html#datetime-value" id="ref-for-datetime-value-8">datetime value</a> returns a <a data-link-type="dfn" href="infrastructure.html#time-zone" id="ref-for-time-zone-2">time-zone
    offset</a>, that is the machine-readable equivalent; abort these steps.
       </li><li>If <a data-link-type="dfn" href="infrastructure.html#parsing-a-floating-date-and-time-string" id="ref-for-parsing-a-floating-date-and-time-string-2">parsing a floating date and time string</a> from the element’s <a data-link-type="dfn" href="textlevel-semantics.html#datetime-value" id="ref-for-datetime-value-9">datetime value</a> returns a <a data-link-type="dfn" href="infrastructure.html#global-date-and-time" id="ref-for-global-date-and-time-3">global date and time</a>, that is the machine-readable equivalent;
    abort these steps.
       </li><li>If <a data-link-type="dfn" href="infrastructure.html#parsing-a-week-string" id="ref-for-parsing-a-week-string-1">parsing a week string</a> from the element’s <a data-link-type="dfn" href="textlevel-semantics.html#datetime-value" id="ref-for-datetime-value-10">datetime value</a> returns a <a data-link-type="dfn" href="infrastructure.html#week" id="ref-for-week-2">week</a>, that is the
    machine-readable equivalent; abort these steps.
       </li><li>If the element’s <a data-link-type="dfn" href="textlevel-semantics.html#datetime-value" id="ref-for-datetime-value-11">datetime value</a> consists of only <a data-link-type="dfn" href="infrastructure.html#ascii-digits" id="ref-for-ascii-digits-68">ASCII digits</a>,
    at least one of which is not U+0030 DIGIT ZERO (0), then the machine-readable equivalent is the
    base-ten interpretation of those digits, representing a year; abort these steps.
       </li><li>If <a data-link-type="dfn" href="infrastructure.html#parsing-a-duration-string" id="ref-for-parsing-a-duration-string-1">parsing a duration string</a> from the
    element’s <a data-link-type="dfn" href="textlevel-semantics.html#datetime-value" id="ref-for-datetime-value-12">datetime value</a> returns a <a data-link-type="dfn" href="infrastructure.html#duration" id="ref-for-duration-5">duration</a>,
    that is the machine-readable equivalent; abort these steps.
       </li><li>There is no machine-readable equivalent.
      </li></ol>
      <p class="note" role="note"> The algorithms referenced above are intended to be designed such that for any
  arbitrary string <var>s</var>, only one of the algorithms returns a value. A more
  efficient approach might be to create a single algorithm that parses all these data types in one
  pass; developing such an algorithm is left as an exercise to the reader. </p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTimeElement" data-dfn-type="attribute" data-export="" id="dom-htmltimeelement-datetime"><code>dateTime</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-21">reflect</a> the element’s <code>datetime</code> content
  attribute.</p>
     </div>
     <div class="example" id="example-f1d7cfdd">
      <a class="self-link" href="textlevel-semantics.html#example-f1d7cfdd"></a> The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-10">time</a></code> element can be used to encode dates, for example in microformats. The
    following shows a hypothetical way of encoding an event using a variant on hCalendar that uses
    the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-11">time</a></code> element: 
<pre class="highlight"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"vevent"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"url"</span> <span class="na">href=</span><span class="s">"https://www.web2con.com/"</span><span class="nt">&gt;</span>https://www.web2con.com/<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"summary"</span><span class="nt">&gt;</span>Web 2.0 Conference<span class="nt">&lt;/span&gt;</span>:
  <span class="nt">&lt;time</span> <span class="na">class=</span><span class="s">"dtstart"</span> <span class="na">datetime=</span><span class="s">"2005-10-05"</span><span class="nt">&gt;</span>October 5<span class="nt">&lt;/time&gt;</span> -
  <span class="nt">&lt;time</span> <span class="na">class=</span><span class="s">"dtend"</span> <span class="na">datetime=</span><span class="s">"2005-10-07"</span><span class="nt">&gt;</span>7<span class="nt">&lt;/time&gt;</span>,
  at the <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"location"</span><span class="nt">&gt;</span>Argent Hotel, San Francisco, CA<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
</pre>
     </div>
     <div class="example" id="example-61288e4a">
      <a class="self-link" href="textlevel-semantics.html#example-61288e4a"></a> Here, a fictional microdata vocabulary based on the Atom vocabulary is used with the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-12">time</a></code> element to mark up a blog post’s publication date. 
<pre class="highlight"><span class="nt">&lt;article</span> <span class="na">vocab=</span><span class="s">"https://n.example.org/"</span> <span class="na">typeof=</span><span class="s">"rfc4287"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h1</span> <span class="na">property=</span><span class="s">"title"</span><span class="nt">&gt;</span>Big tasks<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;footer&gt;</span>Published <span class="nt">&lt;time</span> <span class="na">property=</span><span class="s">"published"</span> <span class="na">datetime=</span><span class="s">"2009-08-29"</span><span class="nt">&gt;</span>two days ago<span class="nt">&lt;/time&gt;</span>.<span class="nt">&lt;/footer&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">property=</span><span class="s">"content"</span><span class="nt">&gt;</span>Today, I went out and bought a bike for my kid.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</pre>
     </div>
     <div class="example" id="example-77753efa">
      <a class="self-link" href="textlevel-semantics.html#example-77753efa"></a> In this example, another article’s publication date is marked up using <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-13">time</a></code>, this
    time using the schema.org microdata vocabulary: 
<pre class="highlight"><span class="nt">&lt;article</span> <span class="na">typeof=</span><span class="s">"schema:BlogPosting"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h1</span> <span class="na">property=</span><span class="s">"schema:headline"</span><span class="nt">&gt;</span>Small tasks<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;footer&gt;</span>Published <span class="nt">&lt;time</span> <span class="na">property=</span><span class="s">"schema:datePublished"</span> <span class="na">datetime=</span><span class="s">"2009-08-30"</span><span class="nt">&gt;</span>yesterday<span class="nt">&lt;/time&gt;</span>.<span class="nt">&lt;/footer&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">property=</span><span class="s">"schema:articleBody"</span><span class="nt">&gt;</span>I put a bike bell on his bike.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</pre>
     </div>
     <div class="example" id="example-88fec4a0">
      <a class="self-link" href="textlevel-semantics.html#example-88fec4a0"></a> In the following snippet, the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-14">time</a></code> element is used to encode a date in the
    ISO8601 format, for later processing by a script: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Our first date was <span class="nt">&lt;time</span> <span class="na">datetime=</span><span class="s">"2006-09-23"</span><span class="nt">&gt;</span>a Saturday<span class="nt">&lt;/time&gt;</span>.<span class="nt">&lt;/p&gt;</span>
</pre>
      <p>In this second snippet, the value includes a time:</p>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>We stopped talking at <span class="nt">&lt;time</span> <span class="na">datetime=</span><span class="s">"2006-09-24T05:00-07:00"</span><span class="nt">&gt;</span>5am the next morning<span class="nt">&lt;/time&gt;</span>.<span class="nt">&lt;/p&gt;</span>
</pre>
      <p>A script loaded by the page (and thus privy to the page’s internal convention of marking up
    dates and times using the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-15">time</a></code> element) could scan through the page and look at all
    the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-16">time</a></code> elements therein to create an index of dates and times.</p>
     </div>
     <div class="example" id="example-9d70e54f">
      <a class="self-link" href="textlevel-semantics.html#example-9d70e54f"></a> For example, this element conveys the string "Friday" with the additional semantic that the
    18th of November 2011 is the meaning that corresponds to "Friday": 
<pre class="highlight">Today is <span class="nt">&lt;time</span> <span class="na">datetime=</span><span class="s">"2011-11-18"</span><span class="nt">&gt;</span>Friday<span class="nt">&lt;/time&gt;</span>.
</pre>
     </div>
     <div class="example" id="example-832114c6">
      <a class="self-link" href="textlevel-semantics.html#example-832114c6"></a> In this example, a specific time in the Pacific Standard Time timezone is specified: 
<pre class="highlight">Your next meeting is at <span class="nt">&lt;time</span> <span class="na">datetime=</span><span class="s">"2011-11-18T15:00-08:00"</span><span class="nt">&gt;</span>3pm<span class="nt">&lt;/time&gt;</span>.
</pre>
     </div>
     <h4 class="heading settled" data-level="4.5.17" id="the-code-element"><span class="secno">4.5.17. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-code"><code>code</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-code-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-48">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-74">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-61">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-31">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-47">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-62">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-50">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-63">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-47">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-48">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-47">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-49">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-47">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-51">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-code" id="ref-for-elementdef-code-5">code</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-59">represents</a> a fragment of computer code. This could
  be an XML element name, a file name, a computer program, or any other string that a computer would
  recognize.</p>
     <p>There is no formal way to indicate the language of computer code being marked up. Authors who
  wish to mark <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-code" id="ref-for-elementdef-code-6">code</a></code> elements with the language used, e.g., so that syntax highlighting
  scripts can use the right rules, can use the <code>class</code> attribute, e.g.,
  by adding a class prefixed with "<code>language-</code>" to the element.</p>
     <div class="example" id="example-5928a1dc">
      <a class="self-link" href="textlevel-semantics.html#example-5928a1dc"></a> The following example shows how the element can be used in a paragraph to mark up element
    names and computer code, including punctuation. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The <span class="nt">&lt;code&gt;</span>code<span class="nt">&lt;/code&gt;</span> element represents a fragment of computer
code.<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;p&gt;</span>When you call the <span class="nt">&lt;code&gt;</span>activate()<span class="nt">&lt;/code&gt;</span> method on the
<span class="nt">&lt;code&gt;</span>robotSnowman<span class="nt">&lt;/code&gt;</span> object, the eyes glow.<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;p&gt;</span>The example below uses the <span class="nt">&lt;code&gt;</span>begin<span class="nt">&lt;/code&gt;</span> keyword to indicate
the start of a statement block. It is paired with an <span class="nt">&lt;code&gt;</span>end<span class="nt">&lt;/code&gt;</span>
keyword, which is followed by the <span class="nt">&lt;code&gt;</span>.<span class="nt">&lt;/code&gt;</span> punctuation character
(full stop) to indicate the end of the program.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-8bacfdd1">
      <a class="self-link" href="textlevel-semantics.html#example-8bacfdd1"></a> The following example shows how a block of code could be marked up using the <code>pre</code> and <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-code" id="ref-for-elementdef-code-7">code</a></code> elements. 
<pre class="highlight"><span class="nt">&lt;pre&gt;&lt;code</span> <span class="na">class=</span><span class="s">"language-pascal"</span><span class="nt">&gt;</span>var i: Integer;
begin
    i := 1;
end.<span class="nt">&lt;/code&gt;&lt;/pre&gt;</span>
</pre>
      <p>A class is used in that example to indicate the language used.</p>
     </div>
     <p class="note" role="note"> See the <code><a data-link-type="element" href="grouping-content.html#elementdef-pre" id="ref-for-elementdef-pre-14">pre</a></code> element for more details. </p>
     <h4 class="heading settled" data-level="4.5.18" id="the-var-element"><span class="secno">4.5.18. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-var"><code>var</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-var-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-49">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-75">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-64">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-32">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-48">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-65">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-51">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-66">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-48">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-49">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-48">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-50">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-48">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-52">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-var" id="ref-for-elementdef-var-4">var</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-60">represents</a> a variable. This could be an actual
  variable in a mathematical expression or programming context, an identifier representing a
  constant, a symbol identifying a physical quantity, a function parameter, or just be a term used
  as a placeholder in prose.</p>
     <div class="example" id="example-405641a2">
      <a class="self-link" href="textlevel-semantics.html#example-405641a2"></a> In the paragraph below, the letter "n" is being used as a
    variable in prose: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>If there are <span class="nt">&lt;var&gt;</span>n<span class="nt">&lt;/var&gt;</span> pipes leading to the ice
cream factory then I expect at <span class="nt">&lt;em&gt;</span>least<span class="nt">&lt;/em&gt;</span> <span class="nt">&lt;var&gt;</span>n<span class="nt">&lt;/var&gt;</span>
flavors of ice cream to be available for purchase!<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <p>For mathematics, in particular for anything beyond the simplest of expressions, MathML is more
  appropriate. However, the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-var" id="ref-for-elementdef-var-5">var</a></code> element can still be used to refer to specific
  variables that are then mentioned in MathML expressions.</p>
     <div class="example" id="example-67b2a048">
      <a class="self-link" href="textlevel-semantics.html#example-67b2a048"></a> In this example, an equation is shown, with a legend that references the variables in the
    equation. The expression itself is marked up with MathML, but the variables are mentioned in the
    figure’s legend using <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-var" id="ref-for-elementdef-var-6">var</a></code>. 
<pre class="highlight"><span class="nt">&lt;figure&gt;</span>
  <span class="nt">&lt;math&gt;</span>
  <span class="nt">&lt;mi&gt;</span>a<span class="nt">&lt;/mi&gt;</span>
  <span class="nt">&lt;mo&gt;</span>=<span class="nt">&lt;/mo&gt;</span>
  <span class="nt">&lt;msqrt&gt;</span>
    <span class="nt">&lt;msup&gt;&lt;mi&gt;</span>b<span class="nt">&lt;/mi&gt;&lt;mn&gt;</span>2<span class="nt">&lt;/mn&gt;&lt;/msup&gt;</span>
    <span class="nt">&lt;mi&gt;</span>+<span class="nt">&lt;/mi&gt;</span>
    <span class="nt">&lt;msup&gt;&lt;mi&gt;</span>c<span class="nt">&lt;/mi&gt;&lt;mn&gt;</span>2<span class="nt">&lt;/mn&gt;&lt;/msup&gt;</span>
  <span class="nt">&lt;/msqrt&gt;</span>
  <span class="nt">&lt;/math&gt;</span>
  <span class="nt">&lt;figcaption&gt;</span>
  Using Pythagoras' theorem to solve for the hypotenuse <span class="nt">&lt;var&gt;</span>a<span class="nt">&lt;/var&gt;</span> of
  a triangle with sides <span class="nt">&lt;var&gt;</span>b<span class="nt">&lt;/var&gt;</span> and <span class="nt">&lt;var&gt;</span>c<span class="nt">&lt;/var&gt;</span>
  <span class="nt">&lt;/figcaption&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
</pre>
     </div>
     <div class="example" id="example-7148220c">
      <a class="self-link" href="textlevel-semantics.html#example-7148220c"></a> Here, the equation describing mass-energy equivalence is used in a sentence, and the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-var" id="ref-for-elementdef-var-7">var</a></code> element is used to mark the variables and constants in that equation: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Then he turned to the blackboard and picked up the chalk. After a few moment’s
thought, he wrote <span class="nt">&lt;var&gt;</span>E<span class="nt">&lt;/var&gt;</span> = <span class="nt">&lt;var&gt;</span>m<span class="nt">&lt;/var&gt;</span> <span class="nt">&lt;var&gt;</span>c<span class="nt">&lt;/var&gt;&lt;sup&gt;</span>2<span class="nt">&lt;/sup&gt;</span>. The teacher
looked pleased.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.5.19" id="the-samp-element"><span class="secno">4.5.19. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-samp"><code>samp</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-samp-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-50">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-76">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-67">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-33">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-49">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-68">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-52">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-69">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-49">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-50">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-49">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-51">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-49">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-53">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-samp" id="ref-for-elementdef-samp-5">samp</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-61">represents</a> sample or quoted output from another
  program or computing system.</p>
     <p class="note" role="note"> See the <code>pre</code> and <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-7">kbd</a></code> elements for more details. </p>
     <p class="note" role="note"> This element can be contrasted with the <code><a data-link-type="element" href="sec-forms.html#elementdef-output" id="ref-for-elementdef-output-5">output</a></code> element, which can be
  used to provide immediate output in a Web application. </p>
     <div class="example" id="example-16a8614a">
      <a class="self-link" href="textlevel-semantics.html#example-16a8614a"></a> This example shows the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-samp" id="ref-for-elementdef-samp-6">samp</a></code> element being used
    inline: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The computer said <span class="nt">&lt;samp&gt;</span>Too much cheese in tray
two<span class="nt">&lt;/samp&gt;</span> but I didn’t know what that meant.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-d5d23895">
      <a class="self-link" href="textlevel-semantics.html#example-d5d23895"></a> This second example shows a block of sample output. Nested <code>samp</code> and <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-8">kbd</a></code> elements allow for the styling of specific elements of the sample output using a
    style sheet. There’s also a few parts of the <code>samp</code> that are annotated with even more
    detailed markup, to enable very precise styling. To achieve this, <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-span" id="ref-for-elementdef-span-11">span</a></code> elements are
    used. 
<pre class="highlight"><span class="nt">&lt;pre&gt;&lt;samp&gt;&lt;span</span> <span class="na">class=</span><span class="s">"prompt"</span><span class="nt">&gt;</span>jdoe@mowmow:~$<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;kbd&gt;</span>ssh demo.example.com<span class="nt">&lt;/kbd&gt;</span>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown

<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"prompt"</span><span class="nt">&gt;</span>jdoe@demo:~$<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"cursor"</span><span class="nt">&gt;</span>_<span class="nt">&lt;/span&gt;&lt;/samp&gt;&lt;/pre&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.5.20" id="the-kbd-element"><span class="secno">4.5.20. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-kbd"><code>kbd</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-kbd-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-51">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-77">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-70">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-34">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-50">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-71">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-53">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-72">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-50">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-51">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-50">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-52">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-50">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-54">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-9">kbd</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-62">represents</a> user input (typically keyboard input,
  although it may also be used to represent other input, such as voice commands).</p>
     <p>When the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-10">kbd</a></code> element is nested inside a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-samp" id="ref-for-elementdef-samp-7">samp</a></code> element, it represents
  the input as it was echoed by the system.</p>
     <p>When the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-11">kbd</a></code> element <em>contains</em> a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-samp" id="ref-for-elementdef-samp-8">samp</a></code> element, it represents
  input based on system output, for example invoking a menu item.</p>
     <p>When the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-12">kbd</a></code> element is nested inside another <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-13">kbd</a></code> element, it
  represents an actual key or other single unit of input as appropriate for the input mechanism.</p>
     <div class="example" id="example-9e0985ec">
      <a class="self-link" href="textlevel-semantics.html#example-9e0985ec"></a> Here the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-14">kbd</a></code> element is used to indicate keys to press: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>To make George eat an apple, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>Shift<span class="nt">&lt;/kbd&gt;</span>+<span class="nt">&lt;kbd&gt;</span>F3<span class="nt">&lt;/kbd&gt;&lt;/kbd&gt;&lt;/p&gt;</span>
</pre>
      <p>In this second example, the user is told to pick a particular menu item. The outer <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-15">kbd</a></code> element marks up a block of input, with the inner <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-16">kbd</a></code> elements
    representing each individual step of the input, and the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-samp" id="ref-for-elementdef-samp-9">samp</a></code> elements inside them
    indicating that the steps are input based on something being displayed by the system, in this
    case menu labels:</p>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>To make George eat an apple, select
    <span class="nt">&lt;kbd&gt;&lt;kbd&gt;&lt;samp&gt;</span>File<span class="nt">&lt;/samp&gt;&lt;/kbd&gt;</span>|<span class="nt">&lt;kbd&gt;&lt;samp&gt;</span>Eat Apple...<span class="nt">&lt;/samp&gt;&lt;/kbd&gt;&lt;/kbd&gt;</span>
<span class="nt">&lt;/p&gt;</span>
</pre>
      <p>Such precision isn’t necessary; the following is equally fine:</p>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>To make George eat an apple, select <span class="nt">&lt;kbd&gt;</span>File | Eat Apple...<span class="nt">&lt;/kbd&gt;&lt;/p&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.5.21" id="the-sub-and-sup-elements"><span class="secno">4.5.21. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-sub"><code>sub</code></dfn> and <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-sup"><code>sup</code></dfn> elements</span><a class="self-link" href="textlevel-semantics.html#the-sub-and-sup-elements"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-52">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-78">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-73">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-35">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-51">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-74">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-54">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-75">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-51">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-52">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-51">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-53">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-51">DOM interface</a>:
      </dt><dd>Use <code>HTMLElement</code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-sup" id="ref-for-elementdef-sup-4">sup</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-63">represents</a> a superscript and the <code>sub</code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-64">represents</a> a subscript.</p>
     <p>These elements must be used only to mark up typographical conventions with specific meanings,
  not for typographical presentation for presentation’s sake. For example, it would be inappropriate
  for the <code>sub</code> and <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-sup" id="ref-for-elementdef-sup-5">sup</a></code> elements to be used in the name of the LaTeX
  document preparation system. In general, authors should use these elements only if the <em>absence</em> of those elements would change the meaning of the content.</p>
     <p>In certain languages, superscripts are part of the typographical conventions for some
  abbreviations.</p>
     <div class="example" id="example-6f9fefb8">
      <a class="self-link" href="textlevel-semantics.html#example-6f9fefb8"></a> 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The most beautiful women are
<span class="nt">&lt;span</span> <span class="na">lang=</span><span class="s">"fr"</span><span class="nt">&gt;&lt;abbr&gt;</span>M<span class="nt">&lt;sup&gt;</span>lle<span class="nt">&lt;/sup&gt;&lt;/abbr&gt;</span> Gwendoline<span class="nt">&lt;/span&gt;</span> and
<span class="nt">&lt;span</span> <span class="na">lang=</span><span class="s">"fr"</span><span class="nt">&gt;&lt;abbr&gt;</span>M<span class="nt">&lt;sup&gt;</span>me<span class="nt">&lt;/sup&gt;&lt;/abbr&gt;</span> Denise<span class="nt">&lt;/span&gt;</span>.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-sub" id="ref-for-elementdef-sub-4">sub</a></code> element can be used inside a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-var" id="ref-for-elementdef-var-8">var</a></code> element, for variables that
  have subscripts.</p>
     <div class="example" id="example-70f09c23">
      <a class="self-link" href="textlevel-semantics.html#example-70f09c23"></a> Here, the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-sub" id="ref-for-elementdef-sub-5">sub</a></code> element is used to represent the subscript that identifies the
    variable in a family of variables: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The coordinate of the <span class="nt">&lt;var&gt;</span>i<span class="nt">&lt;/var&gt;</span>th point is
(<span class="nt">&lt;var&gt;</span>x<span class="nt">&lt;sub&gt;&lt;var&gt;</span>i<span class="nt">&lt;/var&gt;&lt;/sub&gt;&lt;/var&gt;</span>, <span class="nt">&lt;var&gt;</span>y<span class="nt">&lt;sub&gt;&lt;var&gt;</span>i<span class="nt">&lt;/var&gt;&lt;/sub&gt;&lt;/var&gt;</span>).
For example, the 10th point has coordinate
(<span class="nt">&lt;var&gt;</span>x<span class="nt">&lt;sub&gt;</span>10<span class="nt">&lt;/sub&gt;&lt;/var&gt;</span>, <span class="nt">&lt;var&gt;</span>y<span class="nt">&lt;sub&gt;</span>10<span class="nt">&lt;/sub&gt;&lt;/var&gt;</span>).<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <p>Mathematical expressions often use subscripts and superscripts. Authors are encouraged to use
  MathML for marking up mathematics, but authors may opt to use <code>sub</code> and <code>sup</code> if detailed mathematical markup is not desired. <a data-link-type="biblio" href="references.html#biblio-mathml">[MATHML]</a></p>
     <div class="example" id="example-d6176bab">
      <a class="self-link" href="textlevel-semantics.html#example-d6176bab"></a> 
<pre class="highlight"><span class="nt">&lt;var&gt;</span>E<span class="nt">&lt;/var&gt;</span>=<span class="nt">&lt;var&gt;</span>m<span class="nt">&lt;/var&gt;&lt;var&gt;</span>c<span class="nt">&lt;/var&gt;&lt;sup&gt;</span>2<span class="nt">&lt;/sup&gt;</span>
</pre>
<pre class="highlight">f(<span class="nt">&lt;var&gt;</span>x<span class="nt">&lt;/var&gt;</span>, <span class="nt">&lt;var&gt;</span>n<span class="nt">&lt;/var&gt;</span>) = log<span class="nt">&lt;sub&gt;</span>4<span class="nt">&lt;/sub&gt;&lt;var&gt;</span>x<span class="nt">&lt;/var&gt;&lt;sup&gt;&lt;var&gt;</span>n<span class="nt">&lt;/var&gt;&lt;/sup&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.5.22" id="the-i-element"><span class="secno">4.5.22. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-i"><code>i</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-i-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-53">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-79">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-76">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-36">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-52">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-77">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-55">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-78">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-52">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-53">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-52">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-54">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-52">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-55">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-i" id="ref-for-elementdef-i-18">i</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-65">represents</a> a span of text in an alternate voice or
  mood, or otherwise offset from the normal prose in a manner indicating a different quality of
  text, such as a taxonomic designation, a technical term, an idiomatic phrase from another
  language, transliteration, a thought, or a ship name in Western texts.</p>
     <p>Terms in languages different from the main text should be annotated with <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-28">lang</a></code> attributes (or, in XML, <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-29">lang</a></code> attributes in the <a data-link-type="dfn" href="infrastructure.html#xml-namespace" id="ref-for-xml-namespace-11">XML namespace</a>).</p>
     <div class="example" id="example-128040a2">
      <a class="self-link" href="textlevel-semantics.html#example-128040a2"></a> The examples below show uses of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-i" id="ref-for-elementdef-i-19">i</a></code> element: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"taxonomy"</span><span class="nt">&gt;</span>Felis silvestris catus<span class="nt">&lt;/i&gt;</span> is cute.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>The term <span class="nt">&lt;i&gt;</span>prose content<span class="nt">&lt;/i&gt;</span> is defined above.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>There is a certain <span class="nt">&lt;i</span> <span class="na">lang=</span><span class="s">"fr"</span><span class="nt">&gt;</span>je ne sais quoi<span class="nt">&lt;/i&gt;</span> in the air.<span class="nt">&lt;/p&gt;</span>
</pre>
      <p>In the following example, a dream sequence is marked up using <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-i" id="ref-for-elementdef-i-20">i</a></code> elements.</p>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>Raymond tried to sleep.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;i&gt;</span>The ship sailed away on Thursday<span class="nt">&lt;/i&gt;</span>, he
dreamt. <span class="nt">&lt;i&gt;</span>The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.<span class="nt">&lt;/i&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;i&gt;</span>Finally one night he picked up the courage to speak with
her—<span class="nt">&lt;/i&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>Raymond woke with a start as the fire alarm rang out.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <p>Authors can use the <code>class</code> attribute on the <code>i</code> element to identify why the element is being used, so that if the style of a particular use (e.g.,
  dream sequences as opposed to taxonomic terms) is to be changed at a later date, the author
  doesn’t have to go through the entire document (or series of related documents) annotating each
  use.</p>
     <p>Authors are encouraged to consider whether other elements might be more applicable than the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-i" id="ref-for-elementdef-i-21">i</a></code> element, for instance the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-em" id="ref-for-elementdef-em-9">em</a></code> element for marking up stress emphasis,
  or the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-17">dfn</a></code> element to mark up the defining instance of a term.</p>
     <p class="note" role="note"> Style sheets can be used to format <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-i" id="ref-for-elementdef-i-22">i</a></code> elements, just like any other
  element can be restyled. Thus, it is not the case that content in <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-i" id="ref-for-elementdef-i-23">i</a></code> elements will
  necessarily be italicized. </p>
     <h4 class="heading settled" data-level="4.5.23" id="the-b-element"><span class="secno">4.5.23. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-b"><code>b</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-b-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-54">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-80">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-79">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-37">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-53">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-80">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-56">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-81">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-53">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-54">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-53">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-55">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-53">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-56">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-6">b</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-66">represents</a> a span of text to which attention is being
  drawn for utilitarian purposes without conveying any extra importance and with no implication of
  an alternate voice or mood, such as key words in a document abstract, product names in a review,
  actionable words in interactive text-driven software, or an article lede.</p>
     <div class="example" id="example-0aef12bd">
      <a class="self-link" href="textlevel-semantics.html#example-0aef12bd"></a> The following example shows a use of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-7">b</a></code> element to highlight key words without
    marking them up as important: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The <span class="nt">&lt;b&gt;</span>frobonitor<span class="nt">&lt;/b&gt;</span> and <span class="nt">&lt;b&gt;</span>barbinator<span class="nt">&lt;/b&gt;</span> components are fried.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-26abd019">
      <a class="self-link" href="textlevel-semantics.html#example-26abd019"></a> In the following example, objects in a text adventure are highlighted as being special by use
    of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-8">b</a></code> element. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>You enter a small room. Your <span class="nt">&lt;b&gt;</span>sword<span class="nt">&lt;/b&gt;</span> glows
brighter. A <span class="nt">&lt;b&gt;</span>rat<span class="nt">&lt;/b&gt;</span> scurries past the corner wall.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-2521f89e">
      <a class="self-link" href="textlevel-semantics.html#example-2521f89e"></a> Another case where the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-9">b</a></code> element is appropriate is in marking up the lede (or
    lead) sentence or paragraph. The following example shows how a <a href="https://news.bbc.co.uk/2/hi/uk_news/scotland/north_east/7101506.stm">BBC article about
    kittens adopting a rabbit as their own</a> could be marked up: 
<pre class="highlight"><span class="nt">&lt;article&gt;</span>
  <span class="nt">&lt;h2&gt;</span>Kittens 'adopted' by pet rabbit<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;p&gt;&lt;b</span> <span class="na">class=</span><span class="s">"lede"</span><span class="nt">&gt;</span>Six abandoned kittens have found an
  unexpected new mother figure — a pet rabbit.<span class="nt">&lt;/b&gt;&lt;/p&gt;</span>
  <span class="nt">&lt;p&gt;</span>Veterinary nurse Melanie Humble took the three-week-old
  kittens to her Aberdeen home.<span class="nt">&lt;/p&gt;</span>
<i>[...]</i>
</pre>
     </div>
     <p>As with the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-i" id="ref-for-elementdef-i-24">i</a></code> element, authors can use the <code>class</code> attribute on the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-10">b</a></code> element to identify why the element is being used, so that if the
  style of a particular use is to be changed at a later date, the author doesn’t have to go through
  annotating each use.</p>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-11">b</a></code> element should be used as a last resort when no other element is more
  appropriate. In particular, headings should use the <code>h1</code> to <code>h6</code> elements,
  stress emphasis should use the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-em" id="ref-for-elementdef-em-10">em</a></code> element, importance should be denoted with the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-16">strong</a></code> element, and text marked or highlighted should use the <code>mark</code> element.</p>
     <div class="example" id="example-fe173c8b">
      <a class="self-link" href="textlevel-semantics.html#example-fe173c8b"></a> The following would be <em>incorrect</em> usage: 
<pre class="bad">&lt;p&gt;&lt;b&gt;WARNING!&lt;/b&gt; Do not frob the barbinator!&lt;/p&gt;</pre>
      <p>In the previous example, the correct element to use would have been <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-17">strong</a></code>, not <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-12">b</a></code>.</p>
     </div>
     <p class="note" role="note"> Style sheets can be used to format <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-13">b</a></code> elements, just like any other
  element can be restyled. Thus, it is not the case that content in <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-14">b</a></code> elements will
  necessarily be boldened. </p>
     <h4 class="heading settled" data-level="4.5.24" id="the-u-element"><span class="secno">4.5.24. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-u"><code>u</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-u-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-55">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-81">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-82">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-38">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-54">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-83">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-57">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-84">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-54">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-55">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-54">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-56">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-54">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-57">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-u" id="ref-for-elementdef-u-5">u</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-67">represents</a> a span of text with an unarticulated, though
  explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in
  Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.</p>
     <p>In most cases, another element is likely to be more appropriate: for marking stress emphasis,
  the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-em" id="ref-for-elementdef-em-11">em</a></code> element should be used; for marking key words or phrases either the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-15">b</a></code> element or the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-mark" id="ref-for-elementdef-mark-4">mark</a></code> element should be used, depending on the context;
  for marking book titles, the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-16">cite</a></code> element should be used; for labeling text with explicit textual annotations, the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-27">ruby</a></code> element should be used; for technical terms, taxonomic designation,
  transliteration, a thought, or for labeling ship names in Western texts, the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-i" id="ref-for-elementdef-i-25">i</a></code> element should be used.</p>
     <p class="note" role="note"> The default rendering of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-u" id="ref-for-elementdef-u-6">u</a></code> element in visual presentations
  clashes with the conventional rendering of hyperlinks (underlining). Authors are encouraged to
  avoid using the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-u" id="ref-for-elementdef-u-7">u</a></code> element where it could be confused for a hyperlink. </p>
     <h4 class="heading settled" data-level="4.5.25" id="the-mark-element"><span class="secno">4.5.25. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-mark"><code>mark</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-mark-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-56">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-82">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-85">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-39">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-55">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-86">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-58">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-87">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-55">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-56">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-55">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-57">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-55">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-58">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-mark" id="ref-for-elementdef-mark-5">mark</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-68">represents</a> a run of text in one document marked or
  highlighted for reference purposes, due to its relevance in another context. When used in a
  quotation or other block of text referred to from the prose, it indicates a highlight that was not
  originally present but which has been added to bring the reader’s attention to a part of the text
  that might not have been considered important by the original author when the block was originally
  written, but which is now under previously unexpected scrutiny. When used in the main prose of a
  document, it indicates a part of the document that has been highlighted due to its likely
  relevance to the user’s current activity.</p>
     <div class="example" id="example-5a7e6544">
      <a class="self-link" href="textlevel-semantics.html#example-5a7e6544"></a> This example shows how the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-mark" id="ref-for-elementdef-mark-6">mark</a></code> element can be used to bring attention to a
    particular part of a quotation: 
<pre class="highlight"><span class="nt">&lt;p</span> <span class="na">lang=</span><span class="s">"en-US"</span><span class="nt">&gt;</span>Consider the following quote:<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;blockquote</span> <span class="na">lang=</span><span class="s">"en-GB"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p&gt;</span>Look around and you will find, no-one’s really
  <span class="nt">&lt;mark&gt;</span>colour<span class="nt">&lt;/mark&gt;</span> blind.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/blockquote&gt;</span>
<span class="nt">&lt;p</span> <span class="na">lang=</span><span class="s">"en-US"</span><span class="nt">&gt;</span>As we can tell from the <span class="nt">&lt;em&gt;</span>spelling<span class="nt">&lt;/em&gt;</span> of the word,
the person writing this quote is clearly not American.<span class="nt">&lt;/p&gt;</span>
</pre>
      <p>(If the goal was to mark the element as misspelt, however, the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-u" id="ref-for-elementdef-u-8">u</a></code> element,
    possibly with a class, would be more appropriate.)</p>
     </div>
     <div class="example" id="example-b7f9707d">
      <a class="self-link" href="textlevel-semantics.html#example-b7f9707d"></a> Another example of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-mark" id="ref-for-elementdef-mark-7">mark</a></code> element is highlighting parts of a document that are
    matching some search string. If someone looked at a document, and the server knew that the user
    was searching for the word "kitten", then the server might return the document with one paragraph
    modified as follows: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>I also have some <span class="nt">&lt;mark&gt;</span>kitten<span class="nt">&lt;/mark&gt;</span>s who are visiting me
these days. They’re really cute. I think they like my garden! Maybe I
should adopt a <span class="nt">&lt;mark&gt;</span>kitten<span class="nt">&lt;/mark&gt;</span>.<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-6a6abb57">
      <a class="self-link" href="textlevel-semantics.html#example-6a6abb57"></a> In the following snippet, a paragraph of text refers to a specific part of a code
    fragment. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The highlighted part below is where the error lies:<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;pre&gt;&lt;code&gt;</span>var i: Integer;
begin
    i := <span class="nt">&lt;mark&gt;</span>1.1<span class="nt">&lt;/mark&gt;</span>;
end.<span class="nt">&lt;/code&gt;&lt;/pre&gt;</span>
</pre>
      <p>This is separate from <em>syntax highlighting</em>, for which <code>span</code> is more
    appropriate. Combining both, one would get:</p>
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The highlighted part below is where the error lies:<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;pre&gt;&lt;code&gt;&lt;span</span> <span class="na">class=</span><span class="s">keyword</span><span class="nt">&gt;</span>var<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">ident</span><span class="nt">&gt;</span>i<span class="nt">&lt;/span&gt;</span>: <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">type</span><span class="nt">&gt;</span>Integer<span class="nt">&lt;/span&gt;</span>;
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">keyword</span><span class="nt">&gt;</span>begin<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">ident</span><span class="nt">&gt;</span>i<span class="nt">&lt;/span&gt;</span> := <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">literal</span><span class="nt">&gt;&lt;mark&gt;</span>1.1<span class="nt">&lt;/mark&gt;&lt;/span&gt;</span>;
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">keyword</span><span class="nt">&gt;</span>end<span class="nt">&lt;/span&gt;</span>.<span class="nt">&lt;/code&gt;&lt;/pre&gt;</span>
</pre>
     </div>
     <div class="example" id="example-a901356f">
      <a class="self-link" href="textlevel-semantics.html#example-a901356f"></a> This is another example showing the use of <code>mark</code> to highlight a part of quoted
    text that was originally not emphasized. In this example, common typographic conventions have led
    the author to explicitly style <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-mark" id="ref-for-elementdef-mark-8">mark</a></code> elements in quotes to render in italics. 
<pre class="highlight"><span class="nt">&lt;head&gt;</span>
  <span class="nt">&lt;style&gt;</span>
  <span class="nt">blockquote</span> <span class="nt">mark</span><span class="o">,</span> <span class="nt">q</span> <span class="nt">mark</span> <span class="p">{</span>
    <span class="k">font</span><span class="o">:</span> <span class="k">inherit</span><span class="p">;</span> <span class="k">font-style</span><span class="o">:</span> <span class="k">italic</span><span class="p">;</span>
    <span class="k">text-decoration</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span>
    <span class="k">background</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;</span> <span class="k">color</span><span class="o">:</span> <span class="k">inherit</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="nc">.bubble</span> <span class="nt">em</span> <span class="p">{</span>
    <span class="k">font</span><span class="o">:</span> <span class="k">inherit</span><span class="p">;</span> <span class="k">font-size</span><span class="o">:</span> <span class="k">larger</span><span class="p">;</span>
    <span class="k">text-decoration</span><span class="o">:</span> <span class="k">underline</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;article&gt;</span>
  <span class="nt">&lt;h1&gt;</span>She knew<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>Did you notice the subtle joke in the joke on panel 4?<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;blockquote&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"bubble"</span><span class="nt">&gt;</span>I didn’t <span class="nt">&lt;em&gt;</span>want<span class="nt">&lt;/em&gt;</span> to believe. <span class="nt">&lt;mark&gt;</span>Of course
  on some level I realized it was a known-plaintext attack.<span class="nt">&lt;/mark&gt;</span> But I
  couldn’t admit it until I saw for myself.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/blockquote&gt;</span>
  <span class="nt">&lt;p&gt;</span>(Emphasis mine.) I thought that was great. It’s so pedantic, yet it
  explains everything neatly.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</pre>
      <p class="note" role="note">Note, incidentally, the distinction between the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-em" id="ref-for-elementdef-em-12">em</a></code> element in this example, which
    is part of the original text being quoted, and the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-mark" id="ref-for-elementdef-mark-9">mark</a></code> element, which is
    highlighting a part for comment.</p>
     </div>
     <div class="example" id="example-fb33a153">
      <a class="self-link" href="textlevel-semantics.html#example-fb33a153"></a> The following example shows the difference between denoting the <em>importance</em> of a span
    of text (<code>strong</code>) as opposed to denoting the <em>relevance</em> of a span of text
    (<code>mark</code>). It is an extract from a textbook, where the extract has had the parts
    relevant to the exam highlighted. The safety warnings, important though they may be, are
    apparently not relevant to the exam. 
<pre class="highlight"><span class="nt">&lt;h3&gt;</span>Wormhole Physics Introduction<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;p&gt;&lt;mark&gt;</span>A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.<span class="nt">&lt;/mark&gt;</span> Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;p&gt;&lt;mark&gt;</span>Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.<span class="nt">&lt;/mark&gt;&lt;/p&gt;</span>

<span class="nt">&lt;p&gt;</span>When a wormhole is created, a vortex normally forms.
<span class="nt">&lt;strong&gt;</span>Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.<span class="nt">&lt;/strong&gt;</span> Vortexes can be avoided when
using sufficiently advanced dialing technology.<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;p&gt;&lt;mark&gt;</span>An obstruction in a gate will prevent it from accepting a
wormhole connection.<span class="nt">&lt;/mark&gt;&lt;/p&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.5.26" id="the-bdi-element"><span class="secno">4.5.26. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-bdi"><code>bdi</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-bdi-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-57">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-83">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-88">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-40">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-56">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-89">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-59">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-90">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-56">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-57">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-56">Global attributes</a>
      </dd><dd>Also, the <code>dir</code> global attribute has special semantics on this element.
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-58">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-56">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-59">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdi" id="ref-for-elementdef-bdi-8">bdi</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-69">represents</a> a span of text that is to be isolated from
  its surroundings for the purposes of bidirectional text formatting. <a data-link-type="biblio" href="references.html#biblio-bidi">[BIDI]</a></p>
     <p class="note" role="note"> The <code>dir</code> global attribute defaults to <code>auto</code> on this element (it never inherits from the parent element like
  with other elements). </p>
     <div class="impl">
      <p class="note" role="note"> This element <a href="dom.html#bidireq">has rendering requirements involving the bidirectional algorithm</a>. </p>
     </div>
     <div class="example" id="example-becede21">
      <a class="self-link" href="textlevel-semantics.html#example-becede21"></a> This element is especially useful when embedding user-generated content with an unknown
    directionality. 
      <p>In this example, usernames are shown along with the number of posts that the user has
    submitted. If the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdi" id="ref-for-elementdef-bdi-9">bdi</a></code> element were not used, the username of the Arabic user would
    end up confusing the text (the bidirectional algorithm would put the colon and the number "3"
    next to the word "User" rather than next to the word "posts").</p>
<pre class="highlight"><span class="nt">&lt;ul&gt;</span>
  <span class="nt">&lt;li&gt;</span>User <span class="nt">&lt;bdi&gt;</span>jcranmer<span class="nt">&lt;/bdi&gt;</span>: 12 posts.
  <span class="nt">&lt;li&gt;</span>User <span class="nt">&lt;bdi&gt;</span>hober<span class="nt">&lt;/bdi&gt;</span>: 5 posts.
  <span class="nt">&lt;li&gt;</span>User <span class="nt">&lt;bdi&gt;</span><bdo dir="rtl">إيان</bdo><span class="nt">&lt;/bdi&gt;</span>: 3 posts.
<span class="nt">&lt;/ul&gt;</span>
</pre>
      <figure>
        <img src="images/sample-bdi.png"> 
       <figcaption>When using the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdi" id="ref-for-elementdef-bdi-10">bdi</a></code> element, the username acts as expected.</figcaption>
      </figure>
      <figure>
        <img src="images/sample-not-bdi.png"> 
       <figcaption>If the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdi" id="ref-for-elementdef-bdi-11">bdi</a></code> element were to be replaced by a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-16">b</a></code> element, the username would confuse the bidirectional algorithm and the third bullet would end up saying "User 3 :", followed by the Arabic name (right-to-left), followed by "posts" and a period.</figcaption>
      </figure>
     </div>
     <h4 class="heading settled" data-level="4.5.27" id="the-bdo-element"><span class="secno">4.5.27. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-bdo"><code>bdo</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-bdo-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-58">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-84">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-91">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-41">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-57">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-92">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-60">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-93">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-57">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-58">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-57">Global attributes</a>
      </dd><dd>Also, the <code>dir</code> global attribute has special semantics on this element.
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-59">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-57">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-60">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdo" id="ref-for-elementdef-bdo-6">bdo</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-70">represents</a> explicit text directionality formatting
  control for its children. It allows authors to override the Unicode bidirectional algorithm by
  explicitly specifying a direction override. <a data-link-type="biblio" href="references.html#biblio-bidi">[BIDI]</a></p>
     <p>Authors must specify the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-22">dir</a></code> attribute on this element, with the
  value <a data-link-type="attr-value" href="dom.html#attr-valuedef-global-dir-ltr" id="ref-for-attr-valuedef-global-dir-ltr-5"><code>ltr</code></a> to specify a left-to-right override and with the value <a data-link-type="attr-value" href="dom.html#attr-valuedef-global-dir-rtl" id="ref-for-attr-valuedef-global-dir-rtl-6"><code>rtl</code></a> to
  specify a right-to-left override. The <a data-link-type="attr-value" href="dom.html#attr-valuedef-global-dir-auto" id="ref-for-attr-valuedef-global-dir-auto-2"><code>auto</code></a> value must not be specified.</p>
     <div class="impl">
      <p class="note" role="note"> This element <a href="dom.html#bidireq">has rendering requirements involving the bidirectional algorithm</a>. </p>
     </div>
     <h4 class="heading settled" data-level="4.5.28" id="the-span-element"><span class="secno">4.5.28. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-span"><code>span</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-span-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-59">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-85">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-94">Phrasing content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-42">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-58">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-95">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-61">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-96">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-58">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-59">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-58">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-60">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-58">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLSpanElement" data-dfn-type="interface" data-export="" id="htmlspanelement-htmlspanelement">HTMLSpanElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-61">HTMLElement</a> {};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-span" id="ref-for-elementdef-span-12">span</a></code> element doesn’t mean anything on its own, but can be useful when used
  together with the <a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-59">Global attributes</a>, e.g., <code>class</code>, <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-30">lang</a></code>, or <code>dir</code>. It <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-71">represents</a> its children.</p>
     <div class="example" id="example-5cc6ece4">
      <a class="self-link" href="textlevel-semantics.html#example-5cc6ece4"></a> In this example, a code fragment is marked up using <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-span" id="ref-for-elementdef-span-13">span</a></code> elements and <code>class</code> attributes so that its keywords and
    identifiers can be color-coded from CSS: 
<pre class="highlight"><span class="nt">&lt;pre&gt;&lt;code</span> <span class="na">class=</span><span class="s">"lang-c"</span><span class="nt">&gt;&lt;span</span> <span class="na">class=</span><span class="s">"keyword"</span><span class="nt">&gt;</span>for<span class="nt">&lt;/span&gt;</span> (<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ident"</span><span class="nt">&gt;</span>j<span class="nt">&lt;/span&gt;</span> = 0; <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ident"</span><span class="nt">&gt;</span>j<span class="nt">&lt;/span&gt;</span> <span class="ni">&amp;lt;</span> 256; <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ident"</span><span class="nt">&gt;</span>j<span class="nt">&lt;/span&gt;</span>++) {
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ident"</span><span class="nt">&gt;</span>i_t3<span class="nt">&lt;/span&gt;</span> = (<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ident"</span><span class="nt">&gt;</span>i_t3<span class="nt">&lt;/span&gt;</span> <span class="err">&amp;</span> 0x1ffff) | (<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ident"</span><span class="nt">&gt;</span>j<span class="nt">&lt;/span&gt;</span> <span class="ni">&amp;lt;&amp;lt;</span> 17);
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ident"</span><span class="nt">&gt;</span>i_t6<span class="nt">&lt;/span&gt;</span> = (((((((<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ident"</span><span class="nt">&gt;</span>i_t3<span class="nt">&lt;/span&gt;</span> &gt;&gt; 3) ^ <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ident"</span><span class="nt">&gt;</span>i_t3<span class="nt">&lt;/span&gt;</span>) &gt;&gt; 1) ^ <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ident"</span><span class="nt">&gt;</span>i_t3<span class="nt">&lt;/span&gt;</span>) &gt;&gt; 8) ^ <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ident"</span><span class="nt">&gt;</span>i_t3<span class="nt">&lt;/span&gt;</span>) &gt;&gt; 5) <span class="err">&amp;</span> 0xff;
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"keyword"</span><span class="nt">&gt;</span>if<span class="nt">&lt;/span&gt;</span> (<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ident"</span><span class="nt">&gt;</span>i_t6<span class="nt">&lt;/span&gt;</span> == <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ident"</span><span class="nt">&gt;</span>i_t1<span class="nt">&lt;/span&gt;</span>)
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"keyword"</span><span class="nt">&gt;</span>break<span class="nt">&lt;/span&gt;</span>;
}<span class="nt">&lt;/code&gt;&lt;/pre&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.5.29" id="the-br-element"><span class="secno">4.5.29. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-br"><code>br</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-br-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-60">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-86">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-97">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-59">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-98">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-62">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#nothing" id="ref-for-nothing-5">Nothing</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-59">Tag omission in text/html</a>:
      </dt><dd>No <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-18">end tag</a>
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-60">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-60">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-61">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-59">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLBRElement" data-dfn-type="interface" data-export="" id="htmlbrelement-htmlbrelement">HTMLBRElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-62">HTMLElement</a> {};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-br" id="ref-for-elementdef-br-5">br</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-72">represents</a> a line break.</p>
     <p class="note" role="note"> While line breaks are usually represented in visual media by physically moving
  subsequent text to a new line, a style sheet or user agent would be equally justified in causing
  line breaks to be rendered in a different manner, for instance as green dots, or as extra
  spacing. </p>
     <p><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-br" id="ref-for-elementdef-br-6">br</a></code> elements must be used only for line breaks that are actually part of the
  content, as in poems or addresses.</p>
     <div class="example" id="example-ef033942">
      <a class="self-link" href="textlevel-semantics.html#example-ef033942"></a> The following example is correct usage of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-br" id="ref-for-elementdef-br-7">br</a></code> element: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>P. Sherman<span class="nt">&lt;br&gt;</span>
42 Wallaby Way<span class="nt">&lt;br&gt;</span>
Sydney<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <p><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-br" id="ref-for-elementdef-br-8">br</a></code> elements must not be used for separating thematic groups in a paragraph.</p>
     <div class="example" id="example-7c81f8c7">
      <a class="self-link" href="textlevel-semantics.html#example-7c81f8c7"></a> The following examples are non-conforming, as they abuse the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-br" id="ref-for-elementdef-br-9">br</a></code> element: 
<pre class="highlight"><span class="nt">&lt;p&gt;&lt;a</span> <span class="err">...</span><span class="nt">&gt;</span>34 comments.<span class="nt">&lt;/a&gt;&lt;br&gt;</span>
<span class="nt">&lt;a</span> <span class="err">...</span><span class="nt">&gt;</span>Add a comment.<span class="nt">&lt;/a&gt;&lt;/p&gt;</span>
</pre>
<pre class="highlight"><span class="nt">&lt;p&gt;&lt;label&gt;</span>Name: <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"name"</span><span class="nt">&gt;&lt;/label&gt;&lt;br&gt;</span>
<span class="nt">&lt;label&gt;</span>Address: <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"address"</span><span class="nt">&gt;&lt;/label&gt;&lt;/p&gt;</span>
</pre>
      <p>Here are alternatives to the above, which are correct:</p>
<pre class="highlight"><span class="nt">&lt;p&gt;&lt;a</span> <span class="err">...</span><span class="nt">&gt;</span>34 comments.<span class="nt">&lt;/a&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;a</span> <span class="err">...</span><span class="nt">&gt;</span>Add a comment.<span class="nt">&lt;/a&gt;&lt;/p&gt;</span>
</pre>
<pre class="highlight"><span class="nt">&lt;p&gt;&lt;label&gt;</span>Name: <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"name"</span><span class="nt">&gt;&lt;/label&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;label&gt;</span>Address: <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"address"</span><span class="nt">&gt;&lt;/label&gt;&lt;/p&gt;</span>
</pre>
     </div>
     <p>If a <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-10">paragraph</a> consists of nothing but a single <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-br" id="ref-for-elementdef-br-10">br</a></code> element, it
  represents a placeholder blank line (e.g., as in a template). Such blank lines must not be used for
  presentation purposes.</p>
     <div class="impl">
      <p>Any content inside <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-br" id="ref-for-elementdef-br-11">br</a></code> elements must not be considered part of the surrounding
  text.</p>
      <p class="note" role="note"> This element <a href="dom.html#bidireq">has rendering requirements involving the bidirectional algorithm</a>. </p>
     </div>
     <h4 class="heading settled" data-level="4.5.30" id="the-wbr-element"><span class="secno">4.5.30. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-wbr"><code>wbr</code></dfn> element</span><a class="self-link" href="textlevel-semantics.html#the-wbr-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-61">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-87">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-99">Phrasing content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-60">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-100">phrasing content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-63">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#nothing" id="ref-for-nothing-6">Nothing</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-60">Tag omission in text/html</a>:
      </dt><dd>No <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-19">end tag</a>
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-61">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-61">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-62">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-60">DOM interface</a>:
      </dt><dd>Uses <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-63">HTMLElement</a></code>.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-wbr" id="ref-for-elementdef-wbr-4">wbr</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-73">represents</a> a line break opportunity.</p>
     <div class="example" id="example-b1e50da4">
      <a class="self-link" href="textlevel-semantics.html#example-b1e50da4"></a> In the following example, someone is quoted as saying something which, for effect, is written
    as one long word. However, to ensure that the text can be wrapped in a readable fashion, the
    individual words in the quote are separated using a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-wbr" id="ref-for-elementdef-wbr-5">wbr</a></code> element. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>So then he pointed at the tiger and screamed
"there<span class="nt">&lt;wbr&gt;</span>is<span class="nt">&lt;wbr&gt;</span>no<span class="nt">&lt;wbr&gt;</span>way<span class="nt">&lt;wbr&gt;</span>you<span class="nt">&lt;wbr&gt;</span>are<span class="nt">&lt;wbr&gt;</span>ever<span class="nt">&lt;wbr&gt;</span>going<span class="nt">&lt;wbr&gt;</span>to<span class="nt">&lt;wbr&gt;</span>catch<span class="nt">&lt;wbr&gt;</span>me"!<span class="nt">&lt;/p&gt;</span>
</pre>
     </div>
     <div class="example" id="example-af568bde">
      <a class="self-link" href="textlevel-semantics.html#example-af568bde"></a> Here, especially long lines of code in a program listing have suggested wrapping points given
    using <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-wbr" id="ref-for-elementdef-wbr-6">wbr</a></code> elements. 
<pre class="highlight"><span class="nt">&lt;pre&gt;</span>...
Heading heading = Helm.HeadingFactory(HeadingCoordinates[1], <span class="nt">&lt;wbr&gt;</span>HeadingCoordinates[2], <span class="nt">&lt;wbr&gt;</span>HeadingCoordinates[3], <span class="nt">&lt;wbr&gt;</span>HeadingCoordinates[4]);
Course course = Helm.CourseFactory(Heading, <span class="nt">&lt;wbr&gt;</span>Maps.MapFactoryFromHeading(heading), <span class="nt">&lt;wbr&gt;</span>Speeds.GetMaximumSpeed().ConvertToWarp());
...<span class="nt">&lt;/pre&gt;</span>
</pre>
     </div>
     <div class="impl">
      <p>Any content inside <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-wbr" id="ref-for-elementdef-wbr-7">wbr</a></code> elements must not be considered part of the surrounding
  text.</p>
<pre class="example" id="example-ec0d264c"><a class="self-link" href="textlevel-semantics.html#example-ec0d264c"></a>var wbr = document.createElement("wbr");wbr.textContent = "This is wrong";
document.body.appendChild(wbr);
</pre>
      <p class="note" role="note"> This element <a href="dom.html#bidireq">has rendering requirements involving the bidirectional algorithm</a>. </p>
     </div>
     <h4 class="heading settled" data-level="4.5.31" id="text-level-semantics-usage-summary"><span class="secno">4.5.31. </span><span class="content">Usage summary</span><a class="self-link" href="textlevel-semantics.html#text-level-semantics-usage-summary"></a></h4>
     <p><em>This section is non-normative.</em></p>
     <table>
      <thead>
       <tr>
        <th>Element 
        </th><th>Purpose 
        </th><th>Example 
      </th></tr></thead><tbody>
       <tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-34">a</a></code> 
        </td><td>Hyperlinks 
        </td><td>
<pre class="example" id="example-00c88207"><a class="self-link" href="textlevel-semantics.html#example-00c88207"></a>Visit my <strong>&lt;a href="drinks.html"&gt;drinks&lt;/a&gt;</strong> page.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-em" id="ref-for-elementdef-em-13">em</a></code> 
        </td><td>Stress emphasis 
        </td><td>
<pre class="example" id="example-029ea541"><a class="self-link" href="textlevel-semantics.html#example-029ea541"></a>I must say I <strong>&lt;em&gt;adore&lt;/em&gt;</strong> lemonade.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-18">strong</a></code> 
        </td><td>Importance 
        </td><td>
<pre class="example" id="example-126bf83a"><a class="self-link" href="textlevel-semantics.html#example-126bf83a"></a>This tea is <strong>&lt;strong&gt;very hot&lt;/strong&gt;</strong>.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-small" id="ref-for-elementdef-small-12">small</a></code> 
        </td><td>Side comments 
        </td><td>
<pre class="example" id="example-1bd1d7b1"><a class="self-link" href="textlevel-semantics.html#example-1bd1d7b1"></a>These grapes are made into wine. <strong>&lt;small&gt;Alcohol is addictive.&lt;/small&gt;</strong></pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-s" id="ref-for-elementdef-s-7">s</a></code> 
        </td><td>Inaccurate text 
        </td><td>
<pre class="example" id="example-88a6a6f7"><a class="self-link" href="textlevel-semantics.html#example-88a6a6f7"></a>Price: <strong>&lt;s&gt;£4.50&lt;/s&gt;</strong> £2.00!</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-17">cite</a></code> 
        </td><td>Titles of works 
        </td><td>
<pre class="example" id="example-9734df2d"><a class="self-link" href="textlevel-semantics.html#example-9734df2d"></a>The case <strong>&lt;cite&gt;Hugo v. Danielle&lt;/cite&gt;</strong> is relevant here.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-18">q</a></code> 
        </td><td>Quotations 
        </td><td>
<pre class="example" id="example-25169825"><a class="self-link" href="textlevel-semantics.html#example-25169825"></a>The judge said <strong>&lt;q&gt;You can drink water from the fish tank&lt;/q&gt;</strong> but advised against it.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-18">dfn</a></code> 
        </td><td>Defining instance 
        </td><td>
<pre class="example" id="example-2eb0c64e"><a class="self-link" href="textlevel-semantics.html#example-2eb0c64e"></a>The term <strong>&lt;dfn&gt;organic food&lt;/dfn&gt;</strong> refers to food produced without synthetic chemicals.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-abbr" id="ref-for-elementdef-abbr-13">abbr</a></code> 
        </td><td>Abbreviations 
        </td><td>
<pre class="example" id="example-a9efafcb"><a class="self-link" href="textlevel-semantics.html#example-a9efafcb"></a>Organic food in Ireland is certified by the <strong>&lt;abbr title="Irish Organic Farmers and Growers Association"&gt;IOFGA&lt;/abbr&gt;</strong>.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-28">ruby</a></code>, <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rb" id="ref-for-elementdef-rb-15">rb</a></code>, <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-17">rp</a></code>, <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-21">rt</a></code>, <code>rtc</code> 
        </td><td>Ruby annotations 
        </td><td>
<pre class="example" id="example-f45175da"><a class="self-link" href="textlevel-semantics.html#example-f45175da"></a><strong>&lt;ruby&gt; &lt;rb&gt;OJ &lt;rp&gt;(&lt;rtc&gt;&lt;rt&gt;Orange Juice&lt;/rtc&gt;&lt;rp&gt;)&lt;/ruby&gt;</strong></pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-data" id="ref-for-elementdef-data-5">data</a></code> 
        </td><td>Machine-readable equivalent 
        </td><td>
<pre class="example" id="example-03b4a889"><a class="self-link" href="textlevel-semantics.html#example-03b4a889"></a>Available starting today! <strong>&lt;data value="UPC:022014640201"&gt;North Coast Organic Apple Cider&lt;/data&gt;</strong></pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-17">time</a></code> 
        </td><td>Machine-readable equivalent of date- or time-related data 
        </td><td>
<pre class="example" id="example-fe1cc645"><a class="self-link" href="textlevel-semantics.html#example-fe1cc645"></a>Available starting on <strong>&lt;time datetime="2011-11-18"&gt;November 18th&lt;/time&gt;</strong>!</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-code" id="ref-for-elementdef-code-8">code</a></code> 
        </td><td>Computer code 
        </td><td>
<pre class="example" id="example-8135b5d7"><a class="self-link" href="textlevel-semantics.html#example-8135b5d7"></a>The <strong>&lt;code&gt;fruitdb&lt;/code&gt;</strong> program can be used for tracking fruit production.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-var" id="ref-for-elementdef-var-9">var</a></code> 
        </td><td>Variables 
        </td><td>
<pre class="example" id="example-eb080911"><a class="self-link" href="textlevel-semantics.html#example-eb080911"></a>If there are <strong>&lt;var&gt;n&lt;/var&gt;</strong> fruit in the bowl, at least <strong>&lt;var&gt;n&lt;/var&gt;</strong>÷2 will be ripe.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-samp" id="ref-for-elementdef-samp-10">samp</a></code> 
        </td><td>Computer output 
        </td><td>
<pre class="example" id="example-06386a4d"><a class="self-link" href="textlevel-semantics.html#example-06386a4d"></a>The computer said <strong>&lt;samp&gt;Unknown error -3&lt;/samp&gt;</strong>.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-17">kbd</a></code> 
        </td><td>User input 
        </td><td>
<pre class="example" id="example-503dd0d9"><a class="self-link" href="textlevel-semantics.html#example-503dd0d9"></a>Hit <strong>&lt;kbd&gt;F1&lt;/kbd&gt;</strong> to continue.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-sub" id="ref-for-elementdef-sub-6">sub</a></code> 
        </td><td>Subscripts 
        </td><td>
<pre class="example" id="example-280dabfc"><a class="self-link" href="textlevel-semantics.html#example-280dabfc"></a>Water is H<strong>&lt;sub&gt;2&lt;/sub&gt;</strong>O.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-sup" id="ref-for-elementdef-sup-6">sup</a></code> 
        </td><td>Superscripts 
        </td><td>
<pre class="example" id="example-9aa9c4fb"><a class="self-link" href="textlevel-semantics.html#example-9aa9c4fb"></a>The Hydrogen in heavy water is usually <strong>&lt;sup&gt;2&lt;/sup&gt;</strong>H.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-i" id="ref-for-elementdef-i-26">i</a></code> 
        </td><td>Alternative voice 
        </td><td>
<pre class="example" id="example-c39e6df9"><a class="self-link" href="textlevel-semantics.html#example-c39e6df9"></a>Lemonade consists primarily of <strong>&lt;i&gt;Citrus limon&lt;/i&gt;</strong>.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-17">b</a></code> 
        </td><td>Keywords 
        </td><td>
<pre class="example" id="example-e1fb6ace"><a class="self-link" href="textlevel-semantics.html#example-e1fb6ace"></a>Take a <strong>&lt;b&gt;lemon&lt;/b&gt;</strong> and squeeze it with a <strong>&lt;b&gt;juicer&lt;/b&gt;</strong>.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-u" id="ref-for-elementdef-u-9">u</a></code> 
        </td><td>Annotations 
        </td><td>
<pre class="example" id="example-38b1779d"><a class="self-link" href="textlevel-semantics.html#example-38b1779d"></a>The mixture of apple juice and <strong>&lt;u class="spelling"&gt;eldeflower&lt;/u&gt;</strong> juice is very pleasant.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-mark" id="ref-for-elementdef-mark-10">mark</a></code> 
        </td><td>Highlight 
        </td><td>
<pre class="example" id="example-9a69a23d"><a class="self-link" href="textlevel-semantics.html#example-9a69a23d"></a>Elderflower cordial, with one <strong>&lt;mark&gt;part&lt;/mark&gt;</strong> cordial to ten <strong>&lt;mark&gt;part&lt;/mark&gt;</strong>s water, stands a<strong>&lt;mark&gt;part&lt;/mark&gt;</strong> from the rest.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdi" id="ref-for-elementdef-bdi-12">bdi</a></code> 
        </td><td>Text directionality isolation 
        </td><td>
<pre class="example" id="example-ac89669b"><a class="self-link" href="textlevel-semantics.html#example-ac89669b"></a>The recommended restaurant is <strong>&lt;bdi lang=""&gt;My Juice Café (At The Beach)&lt;/bdi&gt;</strong>.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdo" id="ref-for-elementdef-bdo-7">bdo</a></code> 
        </td><td>Text directionality formatting 
        </td><td>
<pre class="example" id="example-2b223848"><a class="self-link" href="textlevel-semantics.html#example-2b223848"></a>The proposal is to write English, but in reverse order. "Juice" would become "<strong>&lt;bdo dir=rtl&gt;Juice&lt;/bdo&gt;</strong>"</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-span" id="ref-for-elementdef-span-14">span</a></code> 
        </td><td>Other 
        </td><td>
<pre class="example" id="example-570b939e"><a class="self-link" href="textlevel-semantics.html#example-570b939e"></a>In French we call it <strong>&lt;span lang="fr"&gt;sirop de sureau&lt;/span&gt;</strong>.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-br" id="ref-for-elementdef-br-12">br</a></code> 
        </td><td>Line break 
        </td><td>
<pre class="example" id="example-a9917ce9"><a class="self-link" href="textlevel-semantics.html#example-a9917ce9"></a>Simply Orange Juice Company<strong>&lt;br&gt;</strong>Apopka, FL 32703<strong>&lt;br&gt;</strong>U.S.A.</pre>
       </td></tr><tr>
        <td><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-wbr" id="ref-for-elementdef-wbr-8">wbr</a></code> 
        </td><td>Line breaking opportunity 
        </td><td>
<pre class="example" id="example-88575f9b"><a class="self-link" href="textlevel-semantics.html#example-88575f9b"></a>www.simply<strong>&lt;wbr&gt;</strong>orange<strong>&lt;wbr&gt;</strong>juice.com</pre>
     </td></tr></tbody></table>
    </section></main>
  
<script src="js/fixup.js"></script>
  

<p class="prev_next">← <a href="grouping-content.html#grouping-content"><span class="secno">4.4</span> <span class="content">Grouping content</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="edits.html#edits"><span class="secno">4.6</span> <span class="content">Edits</span></a> →</p></body></html>
